Jqgrid条件格式

jqgrid conditional formatting.

本文关键字:格式 条件 Jqgrid      更新时间:2023-09-26

我试图在插入行后使用jqgrid添加条件格式。然而,似乎什么都没有发生。我在过去使用过afterInsertRow,它是有效的。有什么建议吗?

jQuery("#gridDevicePlan").jqGrid
    ({ 
        url:'/dashboard/summarydeviceplans', 
        datatype: "json", 
        colNames:['Temporal','Short Name','Customer', 'Start', 'End', 'Duration', 'Device Count'], 
        colModel:[  {name:'Temporal',index:'Temporal'},
                    {name:'ShortName',index:'ShortName'},
                    {name:'Customer',index:'Customer'},
                    {name:'DateStart',index:'DateStart',formatter:'date', formatoptions:{srcformat:'Y-m-d H:i:s', newformat:'m/d/Y H:i'}},
                    {name:'DateStop',index:'DateStop',formatter:'date', formatoptions:{srcformat:'Y-m-d H:i:s', newformat:'m/d/Y H:i'}}, 
                    {name:'Duration',index:'Duration'},
                    {name:'DeviceCount',index:'DeviceCount'}
                    ],
        //multiselect: true,  
        rowNum:10, 
        rowList:[10,50,100,300],
        //autowidth: true,
        autowidth: true,
        height: 'auto', 
        pager: '#pagerDevicePlan', 
        sortname: 'ShortName,Customer,DateStart', 
        mtype: "POST", 
        editurl:'/deviceplan/abort',   
        postData:{'deviceIDs[]':$('#device').val(), 
                  'timezone':<?="'".$this->criteria['timezone']."'"?>,
                  'gmtStartDate':<?="'".$this->criteria['gmtStartDate']."'"?>,
                  'gmtStopDate':<?="'".$this->criteria['gmtStopDate']."'"?>           
                 },
        viewrecords: true,
        sortorder: "asc",
        grouping: true,
        caption:false, 
        afterInsertRow: function(rowid, aData) {  //set condiditonal formatting
            alert(aData.Temporal);
            if(aData.Temporal != 'Current'){
             $("#"+rowid).addClass("ui-state-error");
            }
        } 
    }); 
    jQuery("#gridDevicePlan").jqGrid('navGrid','#pagerDevicePlan',{edit:false,add:false,del:false});

我建议您不要使用afterInsertRow 。相反,您应该始终使用gridview: true参数,这样可以提高jqGrid的性能而没有任何缺点。如果您使用gridview: true,则网格主体的填充将首先构造为表示相应HTML片段的字符串,然后将主体作为一个操作放置在页面上。gridview: trueafterInsertRow不能同时使用。如果您使用afterInsertRow,则网格的行将按顺序放置在页面上,然后在每次添加行后称为afterInsertRow。页面中任何元素的放置都要求web浏览器需要重新计算页面中所有元素的位置。这使得网格的填充速度非常慢。

你应该做的是枚举loadComplete中的网格行,并为网格的一些行添加"ui-state-error"类。顺便说一下,调用$("#"+rowid).addClass("ui-state-error");在循环中也是无效的。<table> DOM元素(loadComplete内部的jQuery("#gridDevicePlan")[0]this)具有rows属性,这对于行枚举非常有效。如果你必须找到表/网格行逐行,你可以使用行的另一个DOM方法namedItem。它可以更有效地找到网格中的行。

你可以在这里找到你主要问题的答案。即使网格有相对较多的行,相应的演示也可以非常快地工作。