复选框为true时突出显示行

Question

复选框为true时突出显示行有人能帮我吗，我有一个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"}},                             ],         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

我在答案实现高亮显示的一个好方法。

版本4.3.2的jqGrid有新特性-rowattr回调(见我最初的建议)，特别是针对像你这样的案例。它允许您突出显示一些行的网格。灌装期间在电网里。为了获得最佳的性能优势，您应该使用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应该定义突出显示的行的背景色。

您可以找到相应的演示这里:

因为在演示中，您只需要突出显示，而不是选择我没有使用的行multiselect: true在我的演示中。如果multiselect: true它的工作方式完全一样。

在我回答的最后，我想推荐你使用列模板..该功能将使您的代码更短、更易读和易于维护。您需要做的是：

• 中的列定义中包含常用或最常用的设置。

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