当checkbox为true时突出显示行

可以有人帮助我，我有一个jqgrid，我想突出显示该行，如果checkbox是真实的，谢谢！

这是我想在这个项目中做的…

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

我在回答中描述了如何实现突出显示。

jqGrid版本4.3.2有一个新的特性 – rowattrcallback（见我原来的build议 ），这是特别为像你这样的情况介绍。 它允许您在填充网格时突出显示一些网格行。 为了获得最佳的性能优势，你应该使用gridview: true 。 顺便说一句， 我build议你在所有jqGrids中使用gridview: true 。

rowattrcallback的使用非常简单：

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

CSS类myAltRowClass应该定义高亮行的背景颜色。

相应的演示你可以在这里find：

因为在您的演示中，您只需突出显示，而不是在我的演示中select没有使用multiselect: true的行。 在多选的情况下multiselect: true它的工作方式完全相同。

在我的回答结束时，我想build议您使用列模板 。 该function将使您的代码更短，更易读，易于维护。 你需要做的是以下几点：

• 您可以在cmTemplete列定义中包含常用或最常用的设置。 在你的情况下，它可能是

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

• 那么你可以定义一些variables来描述在某些列中经常使用的常用属性。 例如：

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

• 之后，您可以使用myCheckboxTemplate和myTextareaTemplate ，这将在您的情况下减less到以下

 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},