отзывы

Восстановление
пароля

Готово

Назад

Основы программирования
Успеха достигает тот, кто способен на время отодвинуть свои увлечения
Программист - профессия будущего!

Языки программирования



Контакты

  

       Your Friend:

 

 

        supsemiga@gmail.com

js Grid таблицы у select option изменить background-color

  • 71

  • 0

  • Нравится

    0

  • Код:896559432424

js select option background-color
Задайте вопрос продавцу

js Grid таблицы у select option изменить background-color

грн. / шт.

Компания: Уроки программирования
Телефон: +38(093)43-03-164
Адрес: Киевская область г. Киев, с. Красное
Оставьте свой номер
Оставьте свой номер телефона и представитель компании с вами свяжется.

     javascript - Изменить цвет фона option

 

 

1. js Grid таблицы у select option изменить background-color - как правильно сделать?

 

У каждой таблицы Grid мы можем получить информацию из ID, также получить их значения.
После получения значений мы можем их менять.

 

  var ids_short_title = $("#orders_table").getCol('short_title'); // Это не используем массив ячеек - red, green, yellow
//  var short_title_0 = $("#gs_short_title :nth-child(0) ").html(); // ALL менять не надо!
  var short_title_1 = $("#gs_short_title :nth-child(1) ").html();
  var short_title_2 = $("#gs_short_title :nth-child(2) ").html();
  var short_title_3 = $("#gs_short_title :nth-child(3) ").html();
  var short_title_4 = $("#gs_short_title :nth-child(4) ").html();


          // Меняем для ячейки == 1
          var color_font_short_title_1 = 'black';
          if(short_title_1=='red'){
              color_font_short_title_1 = 'white';
          }else if(short_title_1=='green'){
              color_font_short_title_1 = 'white';
          }else if(short_title_1=='yellow'){
              color_font_short_title_1 = 'black';
          }

          // 2
          var color_font_short_title_2 = 'black';
          if(short_title_2=='red'){
              color_font_short_title_2 = 'white';
          }else if(short_title_2=='green'){
              color_font_short_title_2 = 'white';
          }else if(short_title_2=='yellow'){
              color_font_short_title_2 = 'black';
          }

          // 3
          var color_font_short_title_3 = 'black';
          if(short_title_3=='red'){
              color_font_short_title_3 = 'white';
          }else if(short_title_3=='green'){
              color_font_short_title_3 = 'white';
          }else if(short_title_3=='yellow'){
              color_font_short_title_3 = 'black';
          }

      // 4
      var color_font_short_title_4 = 'black';
      if(short_title_4=='red'){
          color_font_short_title_4 = 'white';
      }else if(short_title_4=='green'){
          color_font_short_title_4 = 'white';
      }else if(short_title_4=='yellow'){
          color_font_short_title_4 = 'black';
      }


  // Поменяем Background у Option выпадающего из Select
 // $("#gs_short_title :nth-child(0) ").css("background", short_title_0); // ALL менять не надо!
  // 1
    $("#gs_short_title :nth-child(1) ").css("background", short_title_1);
    $("#gs_short_title :nth-child(1) ").css("color", color_font_short_title_1);
    // 2
    $("#gs_short_title :nth-child(2) ").css("background", short_title_2);
    $("#gs_short_title :nth-child(2) ").css("color", color_font_short_title_2);
      // 3
    $("#gs_short_title :nth-child(3) ").css("background", short_title_3);
    $("#gs_short_title :nth-child(3) ").css("color", color_font_short_title_3);
      // 4
    $("#gs_short_title :nth-child(4) ").css("background", short_title_4);
    $("#gs_short_title :nth-child(4) ").css("color", color_font_short_title_4);

 

Пример полный:

$("#orders_table").jqGrid({
   url:'/admin/ext/ajax/get_orders.php',
   datatype: "json",
   height:'auto',
   //width:900,
   colNames:['B-Nr.',  'Datum', 'Status', 'Auto status' ,'Betrag','Firma / USt-Nr.','Name / PLZ / Nickname','KN-Nr.','Zalungsweise','Zalungstatus','Plattform','Info', 'Orders status id'],
   colModel:[
   {name:'id',index:'orders_id', width:70, sorttype:"int", align:'center'},
   {name:'orders_date',index:'orders_date', width:115, align:'center', formatter:'date', formatoptions:{srcformat:"Y-m-d H:i:s",newformat:"d.m.Y H:i"}},
   {name:'orders_status',index:'orders_status', width:200, align:'center', stype:"select",editoptions: {value:":All" + ordersStringGrid}   },
       {name:'short_title',index:'short_title', width:100,  align:'center', stype:"select",editoptions: {value:":All" + ordersAutomatStringGrid} },
           {name:'orders_total',index:'orders_total', width:100, align:'right', formatter:'currency',formatoptions:{decimalSeparator:",",thousandsSeparator:".",suffix:""}},
   {name:'company',index:'company', width:200},
   {name:'name',index:'name', width:200},
   {name:'customers_id',index:'customers_id', width:70, sorttype:"int", align:'center'},
   {name:'payment',index:'payment', width:100, align:'left',stype:"select",editoptions: {value:":All;paypal:PayPal;prepayment:Vorkasse;sofort:Sofortüberweisung;billsafe:BillSafe;mpass:mpass;cash:Bar;invoice:auf Rechnung;transfer:Überweisung;klarna:Klarna;lastschrift:Lastschrift"}},
   {name:'payment_status',index:'payment_status', width:100, align:'center', stype:"select",editoptions: {value:":All;1:Bezahlt;0:Offen"}},
   {name:'platform',index:'platform', width:100, align:'center', stype:"select",editoptions: {value:":All;0:Reifen-Anton;1:Teilehaber;2:Yatego;3:eBay;4:FK.info;5:Check24;6:KfzRad.de;7:RASystems;8:Tyre24"}},
   {name:'info',index:'info',width:50,align:'center',sorttable:false,stype:'none'},
       {name:'orders_status_id',index:'orders_status_id', hidden:true}
      // {name:'info',index:'info',width:50,align:'center'}
   ],
   rowNum:30,
   autowidth: true,
   rowList:[10,20,30,50,100],
   pager: '#orders_table_buttons',
   imgpath: gridimgpath,
   sortname: 'orders_date',
   viewrecords: true,
   sortorder: "desc",
       // postData:{search_name_products_or_shopkod_or_ean:$("#new_orders_search_products").val()},
   // multiselect: true,
   toolbar : [true,"top"],
   loadComplete: function(){

       //$("#orders_table").trigger("reloadGrid");

           // Поменять стили <select> выпадающему в grid для #id shotr_title

           var ids_short_title = $("#orders_table").getCol('short_title'); // Это не используем массив ячеек - red, green, yellow
         //  var short_title_0 = $("#gs_short_title :nth-child(0) ").html(); // ALL менять не надо!
           var short_title_1 = $("#gs_short_title :nth-child(1) ").html();
           var short_title_2 = $("#gs_short_title :nth-child(2) ").html();
           var short_title_3 = $("#gs_short_title :nth-child(3) ").html();
           var short_title_4 = $("#gs_short_title :nth-child(4) ").html();


                   // Меняем для ячейки == 1
                   var color_font_short_title_1 = 'black';
                   if(short_title_1=='red'){
                       color_font_short_title_1 = 'white';
                   }else if(short_title_1=='green'){
                       color_font_short_title_1 = 'white';
                   }else if(short_title_1=='yellow'){
                       color_font_short_title_1 = 'black';
                   }

                   // 2
                   var color_font_short_title_2 = 'black';
                   if(short_title_2=='red'){
                       color_font_short_title_2 = 'white';
                   }else if(short_title_2=='green'){
                       color_font_short_title_2 = 'white';
                   }else if(short_title_2=='yellow'){
                       color_font_short_title_2 = 'black';
                   }

                   // 3
                   var color_font_short_title_3 = 'black';
                   if(short_title_3=='red'){
                       color_font_short_title_3 = 'white';
                   }else if(short_title_3=='green'){
                       color_font_short_title_3 = 'white';
                   }else if(short_title_3=='yellow'){
                       color_font_short_title_3 = 'black';
                   }

               // 4
               var color_font_short_title_4 = 'black';
               if(short_title_4=='red'){
                   color_font_short_title_4 = 'white';
               }else if(short_title_4=='green'){
                   color_font_short_title_4 = 'white';
               }else if(short_title_4=='yellow'){
                   color_font_short_title_4 = 'black';
               }


           // Поменяем Background у Option выпадающего из Select
          // $("#gs_short_title :nth-child(0) ").css("background", short_title_0); // ALL менять не надо!
           // 1
             $("#gs_short_title :nth-child(1) ").css("background", short_title_1);
             $("#gs_short_title :nth-child(1) ").css("color", color_font_short_title_1);
             // 2
             $("#gs_short_title :nth-child(2) ").css("background", short_title_2);
             $("#gs_short_title :nth-child(2) ").css("color", color_font_short_title_2);
               // 3
             $("#gs_short_title :nth-child(3) ").css("background", short_title_3);
             $("#gs_short_title :nth-child(3) ").css("color", color_font_short_title_3);
               // 4
             $("#gs_short_title :nth-child(4) ").css("background", short_title_4);
             $("#gs_short_title :nth-child(4) ").css("color", color_font_short_title_4);





 

           // Поменять выбраному SELECT в Таблице Grid Стили
      $('div.loading').hide();
      var ids = $("#orders_table").getDataIDs();
           
           var orders_status =  $("#orders_table").getCol('orders_status'); 
           var orders_status_id =  $("#orders_table").getCol('orders_status_id');






               for (var i = 0; i < ids.length; i++) { // FDF5CE /// Offen


                   // ======== Задача сделать Auto Status - Red Green Blue разным цветом
                    var value_auto_status_color =  $("#"+ids[i]+" :nth-child(4)").html();

                    //  console.log(value_auto_status_color);

                    var color_font = 'black';
                    if(value_auto_status_color=='red'){
                          color_font = 'white';
                    }else if(value_auto_status_color=='green'){
                           color_font = 'white';
                    }else if(value_auto_status_color=='yellow'){
                           color_font = 'black';
                    }
                     $("#"+ids[i]+" :nth-child(4)").css("background", value_auto_status_color);
                     $("#"+ids[i]+" :nth-child(4)").css("color",      color_font);
                     $("#"+ids[i]+" :nth-child(4)").html('')
                    // ======================================================================



                      if(orders_status_id[i]==1){
                         $("#"+ids[i]).css("background","#FFEAEA");


                      }
                      
                       else if(orders_status_id[i]==4){
                         $("#"+ids[i]).css("background","#F0F0F0");
                       }
                      
                       else if(orders_status_id[i]==16){
                         $("#"+ids[i]).css("background","#FDF5CE");
                      }


                      
               }
         
         
          
           
           
           
      for(var i=0;i<ids.length;i++){
         var cl = ids[i];
              
         var but = '<button class="ui-state-default ui-corner-all ui-local-button" type="button" style="margin:2px;padding:1px;border:none;width:98%;" onclick=treeInfo('order',' + ids[i] + ');><img align="absmiddle" src="/admin/images/icons/info.gif">  </button> ';
         //$(but).click(function(){alert('ok!')}); // 1. logo_komplettrader.png 2. logo_felgen.png 3. logo_reifen.png
         $("#orders_table").setRowData(ids[i],{info:but});
      }
      $('button','#orders_table').hover(function(){
         $(this).addClass('ui-state-hover');
      },function(){
         $(this).removeClass('ui-state-hover');
      });
   },
   ondblClickRow: function(id){window.location = "/admin/new_orders.php?action=edit&documents_id=" + id},
   caption:"Bestellungen",
   hidegrid:true
}).navGrid('#orders_table_buttons',{
   edit:false,
   add:false,
   del:false,
   search:false
});

$("#t_orders_table").remove();
$('#orders_table').filterToolbar();
if(typeof addJqGridNavigation == 'function')
   addJqGridNavigation();
//-------------СПИСОК ЗАКАЗОВ---------------------//


 

 

 

 

 

 

var short_title_1 = $("#gs_short_title :nth-child(1) ").html();

 

// Меняем для ячейки == 1
var color_font_short_title_1 = 'black';
if(short_title_1=='red'){
    color_font_short_title_1 = 'white';
}else if(short_title_1=='green'){
    color_font_short_title_1 = 'white';
}else if(short_title_1=='yellow'){
    color_font_short_title_1 = 'black';
}

 

 

// 1
  $("#gs_short_title :nth-child(1) ").css("background", short_title_1);
  $("#gs_short_title :nth-child(1) ").css("color", color_font_short_title_1);
  $("#gs_short_title :nth-child(1) ").css("background", short_title_1);
  $("#gs_short_title :nth-child(1) ").css("color", color_font_short_title_1);
// 2
$("#gs_short_title :nth-child(2) ").css("background", short_title_2);
$("#gs_short_title :nth-child(2) ").css("color", color_font_short_title_2);
  // 3
$("#gs_short_title :nth-child(3) ").css("background", short_title_3);
$("#gs_short_title :nth-child(3) ").css("color", color_font_short_title_3);
  // 4
$("#gs_short_title :nth-child(4) ").css("background", short_title_4);
$("#gs_short_title :nth-child(4) ").css("color", color_font_short_title_4);

Отзывов нет

Публикация отзыва производится после предварительной модерации

Отправить

Случайные статьи