Выделите строку, когда флажок установлен true

Question

Может кто-нибудь мне помочь, у меня есть jqgrid, и я хочу выделить строку, если флажок прав, спасибо!

это то, что я хочу сделать в этом проекте ...

function loadjqGrid(jsonGridData){ 
    var xaxis=1300 
    var yaxis = $(document).height(); 
    yaxis = yaxis-500; 
    getGrids();  
    $("#maingrid").jqGrid({ 
     url:'models/mod.quoservicetypedetails.php?ACTION=view', 
     mtype: 'POST', 
     datatype: 'xml', 
     colNames:getColumnNames(jsonGridData), 
     colModel :[ 
      {name:'TypeID', index:'TypeID', width:350,hidden:true, align:'center',sortable:false,editable:true, 
      edittype:"select",editoptions:{value:getTypeID()},editrules: { edithidden: true}}, 
      {name:'Order1', index:'Order1', width:80, align:'center',sortable:false,editable:true,edittype:"textarea",editoptions:{size:"30",maxlength:"30"}},     
      {name:'Order2', index:'Order2', width:80, align:'center',sortable:false,editable:true,edittype:"textarea",editoptions:{size:"30",maxlength:"30"}}, 
      {name:'Order3', index:'Order3', width:80, align:'center',sortable:false,editable:true,edittype:"textarea",editoptions:{size:"30",maxlength:"30"}},      
      {name:'Description', index:'Description', width:140, align:'center',sortable:false,editable:true, 
      edittype:"textarea",editoptions:{size:"30",maxlength:"30"}},      
      {name:'Notes', index:'Notes', width:120, align:'center',sortable:false,editable:true,edittype:"textarea",editoptions:{size:"30",maxlength:"30"}}, 
      {name:'Measure', index:'Measure', width:80, align:'center',sortable:false,editable:true, edittype:"textarea", editoptions:{size:"30",maxlength:"30"}},     
      {name:'UnitPrice', index:'UnitPrice', width:100, align:'center',sortable:false,editable:false,edittype:"textarea",editoptions:{size:"30",maxlength:"30"}}, 
      {name:'Remarks', index:'Remarks', width:140, align:'center',sortable:false,editable:true,edittype:"textarea",editoptions:{size:"30",maxlength:"30"}}, 
      {name:'UnitCost', index:'UnitCost', width:100, align:'center',sortable:false,editable:true,edittype:"textarea",editoptions:{size:"30",maxlength:"30"}},  
      {name:'Service', index:'Service', width:120, align:'center',sortable:false,editable:true,edittype:"textarea",editoptions:{size:"30",maxlength:"30"}}, 
      //If the GroupHeader is true the row background is yellow 
      {name:'GroupHeader', index:'GroupHeader', width:100, align:'center',sortable:false,editable:true,formatter:'checkbox', edittype:'checkbox', type:'select', editoptions:{value:"1:0"}}, 
      {name:'IsGroup', index:'IsGroup', width:80, align:'center',sortable:false,editable:true,formatter:'checkbox', edittype:'checkbox', type:'select', editoptions:{value:"1:0"}}, 
     ], 
     viewrecords: true, 
     rowNum:20, 
     sortname: 'id', 
     viewrecords: true, 
     sortorder: "desc", 
     height: yaxis, 
     pager : '#gridpager', 
     recordtext: "View {0} - {1} of {2}", 
     emptyrecords: "No records to view", 
     loadtext: "Loading...", 
     pgtext : "Page {0} of {1}",   
     height: yaxis, 
     width: xaxis, 
     shrinkToFit: false, 
     multiselect: true, 
     editurl:'models/mod.quoservicetypedetails.php?ACTION=edit' 
    }); 
} 

Как я мог это сделать? Кто-нибудь может мне помочь?

Answer 1

Я описал в the answer один хороший способ, как вы можете реализовать выделение.

Версия 4.3.2 jqGrid имеет новую функцию - rowattr callback (см. my original suggestion), которая была введена специально для таких случаев, как ваша. Он позволяет выделить некоторые ряды сетки во время заполнения сетки. Чтобы иметь лучшее преимущество в производительности, вы должны дополнительно использовать gridview: true. Кстати Я рекомендую вам использовать gridview: true во всех jqGrids.

Использование rowattr обратного вызова очень легко:

gridview: true, 
rowattr: function (rd) { 
    if (rd.GroupHeader === "1") { // verify that the testing is correct in your case 
     return {"class": "myAltRowClass"}; 
    } 
} 

CSS-класс myAltRowClass должен определить цвет фона выделенных строк.

Соответствующее демо вы можете найти here:

Потому что в вашем демо вам нужно просто выделить и не выбрать строки, я не использовали multiselect: true в моем демо. В случае multiselect: true он работает точно так же.

В конце моего ответа я хотел бы рекомендовать вам использовать column templates. Эта функция сделает ваш код короче, читабельнее и прост в обслуживании. Что вам нужно сделать, это следующее:

• Вы можете включить общие или наиболее часто используемые настройки из определений столбцов в cmTemplete. В вашем случае это может быть

cmTemplate: {align: 'center', sortable: false, editable: true, width: 80} 

• , то вы можете определить некоторые переменные, описывающие общие свойства, которые вы часто используете в некоторых столбцах. Например:

var myCheckboxTemplate = {formatter: 'checkbox', edittype: 'checkbox', type: 'select', 
     editoptions: {value: "1:0"}}, 
    myTextareaTemplate = {edittype: "textarea", 
     editoptions: {size: "30", maxlength: "30"}}; 

• после этого вы можете использовать myCheckboxTemplate и myTextareaTemplate внутри colModel, которая уменьшается в вашем случае к следующему

colModel: [ 
    {name: 'TypeID', index: 'TypeID', width: 350, hidden: true, edittype: "select", 
     editoptions: {value: getTypeID()}, editrules: { edithidden: true}}, 
    {name: 'Order1', index: 'Order1', template: myTextareaTemplate}, 
    {name: 'Order2', index: 'Order2', template: myTextareaTemplate}, 
    {name: 'Order3', index: 'Order3', template: myTextareaTemplate}, 
    {name: 'Description', index: 'Description', width: 140, template: myTextareaTemplate}, 
    {name: 'Notes', index: 'Notes', width: 120, template: myTextareaTemplate}, 
    {name: 'Measure', index: 'Measure', template: myTextareaTemplate}, 
    {name: 'UnitPrice', index: 'UnitPrice', width: 100, editable: false, template: myTextareaTemplate}, 
    {name: 'Remarks', index: 'Remarks', width: 140, template: myTextareaTemplate}, 
    {name: 'UnitCost', index: 'UnitCost', width: 100, template: myTextareaTemplate}, 
    {name: 'Service', index: 'Service', width: 120, template: myTextareaTemplate}, 
    //If the GroupHeader is true the row background is yellow 
    {name: 'GroupHeader', index: 'GroupHeader', width: 100, template: myCheckboxTemplate}, 
    {name: 'IsGroup', index: 'IsGroup', template: myCheckboxTemplate} 
], 
cmTemplate: {align: 'center', sortable: false, editable: true, width: 80},