突出顯示行當複選框爲真

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中描述瞭如何實現突出顯示的一個好方法。

jqGrid 4.3.2版本新增功能 - rowattr回調（請參閱my original suggestion），這是特別爲您的情況引入的。它允許您在填充網格的期間突出顯示一些網格行。爲了獲得最佳的性能優勢，您應該另外使用gridview: true。順便說一句我建議你在所有jqGrids中使用gridview: true。

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