欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-04-15 14:45:21
...

效果如图:
DataTable中根据某一个字段来改变本行格式

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

关于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;
                        }
                    },  

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