DataTable中根据某一个字段来改变本行格式

来源:互联网 发布:js在线编辑器 编辑:程序博客网 时间:2024/06/06 04:34

效果如图:
这里写图片描述

根据红色 字体这一列的数据,是到期日期,如果在一个月内到期的话,那么该行将会变成黄色显示,并且到期日期将会变成红色。

关于columns 和 columnDefs的区别,请看这篇
http://blog.csdn.net/beta_xiyan/article/details/76614992

代码如下:

  "aoColumnDefs":[                   {//第 14 列 到期日期(一开始写的13,因为数数一般会从0 开始...)                         "targets":13,                        createdCell: function(td, cellData, rowData) {                            var data = cellData                            if ((data+"").length>=8) {                                var data1 = data.substr(0,4)+"/"+data.substr(4,2)+"/"+data.substr(6,2)                                var da_1 = new Date(Date.parse(data1));                                  var da_2 = new Date();                                if ((da_1-da_2)/1000/3600/24 < 30 && (da_1-da_2)/1000/3600/24 > 0) {//三天内到期                                    /*该行变色*/                                    $(td).parents('tr').css("background-color","yellow");                                    $(td).css("color","red");                                }                                return data                            }else                                return data                        },                    }                ],  

另外:
createdCell: function(nTd, sData, oData, iRow, iCol) 有五个参数,他们的意思分别是:
①,ntd 就是这个单元格对应table 中的《td》《/td》(此处使用英文尖括号会解析td)。
②,sData指 单元格中的数据,
③,oData指本行的数据,
至于 irow ,icol大概就是 行 和 列 了把,上述代码中没用到。

还有一个:
提到 createdCell 就不得不说一下 Render,也是在columnDefs中使用:

   "aoColumnDefs":[                    {//倒数第一列                        "targets":-1,                        "bSortable": false,                        render: function(data, type, row) {                            var html ='<button class="btn btn-xs jfedit btn-danger" value="'+row.tcId+'">编辑</button>&nbsp;&nbsp;&nbsp;&nbsp;<button class="btn btn-xs btn-danger jfdelete" value="'+row.tcId+'">删除</button>';                            return html;                        }                    },  

不过,后者只能对数据进行渲染,不能对格式进行操作,而前者既可以对数据操作,又能对格式进行操作。

阅读全文
1 0
原创粉丝点击