Javascript 当复选框为真时突出显示行

Highlight row when the checkbox is true

提问by Jacx Toi

Can Some one help me, I have a jqgrid and I want to highlight the row if the checkbox is true, thanks!!

有人可以帮助我吗，我有一个 jqgrid，如果复选框为真，我想突出显示该行，谢谢！！

this is what i want to make in this project...

这就是我想在这个项目中做的......

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'
    }); 
}

How could I do this? Can someone help me?

我怎么能这样做？有人能帮我吗？

回答by Oleg

I described in the answerone good way how you can implement the highlighting.

我在答案中描述了一种如何实现突出显示的好方法。

Version 4.3.2 of jqGrid has new feature - rowattrcallback (see my original suggestion), which was introduced especially for cases like yours. It allows you to highlight some rows of grid during fillingof the grid. To have the best performance advantage you should use gridview: trueadditionally. By the way I recommend you to use gridview: truein all jqGrids.

jqGrid 4.3.2 版具有新功能 -rowattr回调（请参阅我的原始建议），它是专门针对像您这样的情况引入的。它允许您在填充网格期间突出显示一些网格行。为了获得最佳性能优势，您应该gridview: true额外使用。顺便说一句，我建议您gridview: true在所有 jqGrids 中使用。

The usage of rowattrcallback is very easy:

rowattr回调的使用非常简单：

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

The CSS class myAltRowClassshould define background color of highlighted rows.

CSS 类myAltRowClass应定义突出显示行的背景颜色。

The corresponding demo you can find here:

您可以在此处找到相应的演示：

Because in your demo you need just highlight and not select the rows I didn't used multiselect: truein my demo. In case of multiselect: trueit works exactly in the same way.

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

At the end of my answer I would like to recommend you to use column templates. The feature will make your code shorter, more readable and easy to maintain. What you need to do is the following:

在我的回答结束时，我想建议您使用列模板。该功能将使您的代码更短、更易读且易于维护。您需要做的是：

• you can include common or the most frequently used settings from column definitions in cmTemplete. In your case it could be

• 您可以在cmTemplete. 在你的情况下它可能是

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

• then you can define some variables which describe common properties which you use frequently in some columns. For example:

• 然后您可以定义一些变量来描述您在某些列中经常使用的公共属性。例如：

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

• after that you can use myCheckboxTemplateand myTextareaTemplateinside of colModelwhich will reduced in your case to the following

• 后，您可以使用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},