复选框为true时突出显示行 [英] Highlight row when the checkbox is true

问题描述

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

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

  function loadjqGrid（jsonGridData）{
 var xaxis = 1300 
 var yaxis = $（document ）。高度（）; 
 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， maxl ength：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}}，
 //如果GroupHeader为true，则行背景为黄色
 {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：'复选框'，键入：'select'，editoptions：{value：1：0}}，
]，
 viewrecords：true，
 rowNum：20，
 sortname： 'ID ，
 viewrecords：true，
 sortorder：desc，
 height：yaxis，
 pager：'＃gridpager'，
 recordtext：View {0}  - {1} {2}，
 emptyrecords：没有要查看的记录，
 loadtext：正在加载...，
 pgtext：{0}的页面{0} ，
身高：y轴，
宽度：x轴，
 shrinkToFit：false，
 multiselect：true，
 editurl：'models / mod.quoservicetypedetails.php？行动=编辑'
}）; 
} 
  

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

解决方案

我在。该功能将使您的代码更短，更易读，易于维护。您需要做的是：

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

  cmTemplate：{align： 'center'，sortable：false，editable：true，width：80} 
  

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

  var myCheckboxTemplate = {formatter：'复选框'，edittype：'复选框'，输入：'select'，
 editoptions：{value：1：0}}，
 myTextareaTemplate = {edittype：textarea，
 editoptions： {size：30，maxlength：30}}; 
  

• 之后你可以使用 myCheckboxTemplate 和 myTextareaTemplate 在 colModel 里面，在你的情况下将减少到以下

  colModel：[
 {name：'TypeID'，index： 'TypeID'，宽度：350，隐藏：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：myTextareaTem plate}，
 {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}，
 //如果GroupHeader为true，则行背景为黄色
 {name：'GroupHeader'，index：'GroupHeader'，width：100，template： myCheckboxTemplate}，
 {name：'IsGroup'，index：'IsGroup'，template：myCheckboxTemplate} 
]，
 cmTemplate：{align：'center'，sortable：false，editable：true ，宽度：80}，
  

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

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?

解决方案

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

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

The usage of rowattr callback is very easy:

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

The CSS class myAltRowClass should define background color of highlighted rows.

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: true in my demo. In case of multiselect: true it works exactly in the same way.

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

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 myCheckboxTemplate and myTextareaTemplate inside of colModel which will reduced in your case to the following

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

这篇关于复选框为true时突出显示行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！