jggrid标红列和动态标红行的几种方法

在用jggrid显示表格的时候，我们有时候需要特别标出重点的一些数据。有时候是一列数据，有时候是一行数据。对于动态的数据，我们需要根据其中的内容标红或者突出显示某些数据。这里总结了一些方式。用其它的方法突出数据同理，这里用标红来突出数据。

1：标红一列数据

比如最后一列数据我们要标出，可以直接在jggrid的colModel中的formatter返回需要的格式：

             colNames : [ 'Inv No', 'Date', 'Client', 'Amount', 'Tax','Total', 'Notes' ],colModel : [ {name : 'id',index : 'id',width : 55,align:'center'}, {name : 'invdate',index : 'invdate',width : 90,jsonmap : "invdate",align:'center'},{name : 'name',index : 'name asc, invdate',width : 100}, {name : 'amount',index : 'amount',width : 80,align : "right",align:'center'}, {name : 'tax',index : 'tax',width : 80,align : "right",align:'center'}, {name : 'total',index : 'total',width : 80,align : "right",align:'center'}, {name : 'note',index : 'note',width : 150,sortable : false,align:'center',formatter : function(cellvalue,options,rowObj){temp='';if(cellvalue!=""&&cellvalue!=null)temp="<span style='color:red;'>"+cellvalue+"</span>"; return temp;}} ],

2：标红一列数据

我们可以先写样式比如：

<style>tr.markRed{color:#FF0000;}
</style>

假如根据Tax这一列数据，当tax大于80的时候标红这一行

F12看表格结构，每一行有一个ID号，给一行添加样式

$('#tables').jqGrid({url:myUrl+'getTableData',datatype:'json',mtype:'post',postData:postData,//传递额外参数jsonReader : {root:"rows",page: "page",total: "total",records: "records",repeatitems: false,//id: "0"//设置行的ID}, styleUI: 'Bootstrap',colNames : [ 'Inv No', 'Date', 'Client', 'Amount', 'Tax','Total', 'Notes' ],colModel : [ {name : 'id',index : 'id',width : 55,align:'center'}, {name : 'invdate',index : 'invdate',width : 90,jsonmap : "invdate",align:'center'},{name : 'name',index : 'name asc, invdate',width : 100}, {name : 'amount',index : 'amount',width : 80,align : "right",align:'center'}, {name : 'tax',index : 'tax',width : 80,align : "right",align:'center'}, {name : 'total',index : 'total',width : 80,align : "right",align:'center'}, {name : 'note',index : 'note',width : 150,sortable : false,align:'center'} ],width :600,autoencode : 'utf-8',altRows : true,//设置奇偶行shrinkToFit : true,autowidth : true,height : 550,rowList : [ 5, 20, 30 ],jsonReader : {repeatitems : true,id : "0"},pager : '#page',viewrecords : true,sortable : true,caption : '设计',gridComplete: function(data){var colCondition1= $('#tables').jqGrid('getCol','tax',false);var id= $('#tables').jqGrid('getCol','id',false);for(var i=0;i<colCondition1.length;i++){var tax=Number(colCondition1[i]);var rowid=id[i];if(tax>80){//标红 console.log(tax);console.log(rowid);$('#tables').find('#'+rowid).addClass('markRed'); console.log($('#tables').find('#'+(i+1)));}} },loadComplete:function (data) {var JSONdata=JSON.parse(data);$('#tables').clearGridData()[0].addJSONData(JSONdata);$("tr.jqgrow:odd").addClass('oddClass');  }});

注意要写在gridComplete里面，不能写在loadComplete里面

jggrid标红列和动态标红行的几种方法相关推荐

DataGridView动态添加新行的两种方法
简单介绍如何为DataGridView控件动态添加新行的两种方法: 方法一: int index=this.dataGridView1.Rows.Add(); this.dataGridView1. ...
antd table合并行或者列（动态添加合并行、列）
antd table合并行或者列(动态添加合并行.列) 表头只支持列合并,使用 column 里的 colSpan 进行设置. 表格支持行/列合并,使用 render 里的单元格属性 colSpan ...
jQuery - 实现设置指定列给动态表格的行生成自动序号
jQuery - 实现设置指定列给动态表格的行生成自动序号无表头表格 HTML jQuery 示意图有表头表格 HTML jQuery 示意图无表头表格 HTML <table id=&q ...
java校验码的设计_Java动态验证码单线设计的两种方法
1.java的动态验证码我这里将介绍两种方法: 一:根据java本身提供的一种验证码的写法,这种呢只限于大家了解就可以了,因为java自带的模式编写的在实际开发中是没有意义的,所以只供学习一下就可以了 ...
如何让表格中的一列按照公式计算机,excel设置一列运用相同类型的公式的两种方法...
腾讯视频/爱奇艺/优酷/外卖充值4折起 EXCEL工作表中同一列运用相同类型的公式,如图中所示,A1*B1,积要显示在C1,在C1单元格输入公式,＝A1*B1按回车,积就显示在C1了,若往下整个C列 ...
(一)JQuery动态加载js的三种方法
Jquery动态加载js的三种方法如下: 第一种: $.getscript("test.js"); 例如: <script type="text/javascrip ...
layui 表格组件中实现动态增加数据行的一种方式
layui 以界面简洁美观而吸引了不少开发人员,在使用table组件时,需要能编辑表格内容,动态增加数据行.编辑功能组件已支持.但动态增加数据行好像没有支持,网上提供的方式是,获得组件的数据集再加入一 ...
动态修改dom node的两种方法性能比较
Created by Jerry Wang, last modified on Sep 25, 2014 测试代码: <html> <script src="C:\User ...
vue项目动态设置浏览器标题title两种方法
各位铁汁们,老步骤先效果图奉上方法一.使用插件vue-wechat-title来设置浏览器动态标题第一步:安装插件 1. npm vue-wechat-title --save 第二步:在全局ma ...

jggrid标红列和动态标红行的几种方法

jggrid标红列和动态标红行的几种方法相关推荐

最新文章

热门文章