jqgrid条件格式。

时间:2011-08-15 16:20:28

标签: javascript jqgrid

我正在尝试在插入行之后使用条件格式添加到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});

1 个答案:

答案 0 :(得分:4)

我建议你永远不要使用afterInsertRow 。而不是你应该总是使用gridview: true参数来增加jqGrid的性能而没有任何缺点。如果使用gridview: true,网格体的填充将首先构造为表示相应HTML片段的字符串,然后将主体作为一个操作放在页面上。您无法将gridview: trueafterInsertRow一起使用。如果使用afterInsertRow,网格的行将按顺序放置在页面上,然后在每行添加后调用afterInsertRow。放置页面的任何元素都需要Web浏览器重新计算页面上所有元素的所有位置。这使得网格的填充变得非常缓慢。

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

您将找到主要问题的解决方案here。即使网格有相对多的行,相应的demo也能很快地工作。