参数详解连接
columns.renderOption
columnDefs.targetsDT
今天继续由4群的小伙伴- 雨吴 给大家讲解columns.render 的用法
第一个问题：时间格式化这个问题主要是代表一类需要自己写额外的js的问题：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
Date.prototype.Format = function(fmt) { //author: meizz
var o = {
"M+": this.getMonth() + 1,
//月份
"d+": this.getDate(),
//日
"h+": this.getHours(),
//小时
"m+": this.getMinutes(),
//分
"s+": this.getSeconds(),
//秒
"q+": Math.floor((this.getMonth() + 3) / 3),
//季度
"S": this.getMilliseconds() //毫秒
};
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
}
for (var k in o) {
if (new RegExp("(" + k + ")").test(fmt)) {
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
}
}
return fmt;
}
然后大家直接在 columns.render 里面调用这个方法就好(代码里面的注释是告诉大家问题归类的思路，因为很多人不知道自己的问题出在那里)
1
2
3
4
5
6
7
8
render: function(data, type, row, meta) {
//先讲 时间格式化
//这类问题主要给大家讲逻辑，因为都是类似的问题，类似的解决方案
//最基础的解决方案： 一、直接在数据源就格式化为常见的格式（sql或者后台代码格式化）;二、在dt里面格式化;
//在js格式化时间的三种方式，我这里示范一种
//具体方法的链接：http://www.cnblogs.com/zhangpengshou/archive/2012/07/19/2599053.html
return (new Date(data)).Format("yyyy-MM-dd hh:mm:ss"); //date的格式 Thu Apr 26 2016 00:00:00 GMT+0800
}
第二个问题：内容太多用省略号代替、内容不换行，鼠标移上去显示详情 这个问题主要是代表一些需要用css解决的问题：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
render: function(data, type, row, meta) {
//然后是 内容太多用。。。。表示、内容不换行，鼠标移上去显示详情
//这类问题最简单的肯定是使用css解决
// //1. table-layout: fixed 由于table-layout的默认值是auto，
//即table的宽高将取决于其内容的多寡，如果内容的体积无法估测，那么最终表格的呈现形式也无法保证了，
//fixed一下就好了。（注意：此样式是关键）
// //2. white-space: nowrap 是为了保证无论单元格（TD）中文本内容有多少，
//都不会自动换行，此时多余的内容会在水平方向撑破单元格。
// //3. overflow: hidden 隐藏超出单元格的部分。
// //4. text-overflow: ellipsis 将被隐藏的那部分用省略号代替。
//这4个css样式都可以百度出来的,第一个是写在table标签里面的,2、3、4写在td里面
//假设这个tomuchcontent 就是本列的值 data
var tomuchcontent = "asdasdaddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd";
//我这里做个简单的示范
return '<div id="a" style="width:100px;height:100px;overflow: hidden;text-overflow: ellipsis;" '+
'title="‘+tomuchcontent +’">‘+tomuchcontent +’</div>';
}
找到这个问题怎么解决就好解决了，直接就可以百度找到解决方案了
第三个问题：同时显示多个列的内容 这个问题其实昨天已经讲过了，自己通过一些简单的逻辑判断然后返回自己需要的结果就好
1
2
3
4
5
6
7
8
9
render: function(data, type, row, meta) {
//最后一个 同时显示多个列的内容
//我对这个问题的理解是 比方我有两个字段需要同时显示在一个td里面，或者一个td里面有两个按钮
//这个columns.data就完全可以给null了,相应的columns.render().data这里就也是null
//按钮的就是自己在里面拼click事件以及对应的按钮样式了
//return '<a href="javascript:void(0);" onclick="del("'+row.id+'")">' + 删除
// + '</a><a href="javascript:void(0);" onclick="mod("'+row.id+'","'+row.name+'")">' + 编辑 + '</a>';
return '<label>' + row.id + '</label> <label>' + row.name + '</label>';
}
最后给大家讲解下columns.render和columnDefs.render的区别：
其实这个的区别，归根到底是columns和columndefs的区别，它们两个的区别就有
columns先执行，columnDefs后执行columnDefs比columns多一个属性columnDefs.targetsDT
有了这个属性就可以做很多columns做不到的事情
希望大家可以补充下，大家一起学习
针对第一点:
每一次 DataTables 的是重绘或者重载都会后台执行很多回调函数 更多参考
columns.render是在createdRow前执行的
columnDefs.render是在rowCallback后执行的
就会导致columnDefs.render执行的时候其实tr已经全部渲染出来的，大家就可以对全局做一些操作了，
如合并单元格、根据某个tr里面td改变另一个tr里面的td的渲染了等等
针对第二点：
就可以使一个columnDefs.render对应多个列了，或者在没有创建columns的时候使用，更加灵活，columns.render一对一的更加有针对性
两个option都有自己的特点，各有千秋，大家根据自己需求使用对应的option，祝大家对dt使用的更加得心应手！
下面是本节的完整代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="DataTables/css/jquery.dataTables.min.css" rel="stylesheet" />
</head>
<body>
<script src="DataTables/js/jquery.js"></script>
<script src="DataTables/js/jquery.dataTables.min.js"></script>
<table id="example">
</table>
<script>
Date.prototype.Format = function (fmt) { //author: meizz
var o = {
"M+": this.getMonth() + 1, //月份
"d+": this.getDate(), //日
"h+": this.getHours(), //小时
"m+": this.getMinutes(), //分
"s+": this.getSeconds(), //秒
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
"S": this.getMilliseconds() //毫秒
};
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
}
for (var k in o) {
if (new RegExp("(" + k + ")").test(fmt)) {
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
}
}
return fmt;
}
var id = "";
var oTable = $("#example").DataTable({
"serverSide": true,
//分页，取数据等等的都放到服务端去
"deferRender": true,
//当处理大数据时，延迟渲染数据，有效提高Datatables处理能力
"destory": true,
"ajax": {
"dataType": 'json',
"type": "POST",
"url": "/GridSheet/dataGridData",
"data": function(d) {
d.id = id;
},
"async": false
},
"columns": [{
"data": "id",
"width": "100px",
"title": "id"
},
{
"data": "name",
"width": "150px",
"title": "姓名"
},
{
"data": "birthday",
"width": "200px",
"title": "生日",
render: function(data, type, row, meta) {
//先讲 时间格式化
//这类问题主要给大家讲逻辑，因为都是类似的问题，类似的解决方案
//最基础的解决方案： 一、直接在数据源就格式化为常见的格式（sql或者后台代码格式化）;二、在dt里面格式化;
//在js格式化时间的三种方式，我这里示范一种
//具体方法的链接：http://www.cnblogs.com/zhangpengshou/archive/2012/07/19/2599053.html
return (new Date(data)).Format("yyyy-MM-dd hh:mm:ss"); //date的格式 Thu Apr 26 2016 00:00:00 GMT+0800
}
},
{
"data": "a",
"width": "350px",
"title": "a",
render: function(data, type, row, meta) {
//然后是 内容太多用。。。。表示、内容不换行，鼠标移上去显示详情
//这类问题最简单的肯定是使用css解决
// //1. table-layout: fixed 由于table-layout的默认值是auto，
//即table的宽高将取决于其内容的多寡，如果内容的体积无法估测，那么最终表格的呈现形式也无法保证了，
//fixed一下就好了。（注意：此样式是关键）
// //2. white-space: nowrap 是为了保证无论单元格（TD）中文本内容有多少，
//都不会自动换行，此时多余的内容会在水平方向撑破单元格。
// //3. overflow: hidden 隐藏超出单元格的部分。
// //4. text-overflow: ellipsis 将被隐藏的那部分用省略号代替。
//这4个css样式都可以百度出来的,第一个是写在table标签里面的,2、3、4写在td里面
//假设这个tomuchcontent 就是本列的值 data
var tomuchcontent = "asdasdaddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd";
//我这里做个简单的示范
return '<div id="a" style="width:100px;height:100px;overflow: hidden;text-overflow: ellipsis;" '+
'title="‘+tomuchcontent +’">‘+tomuchcontent +’</div>';
}
},
{
"data": null,
"width": "350px",
"title": "b",
render: function(data, type, row, meta) {
//最后一个 同时显示多个列的内容
//我对这个问题的理解是 比方我有两个字段需要同时显示在一个td里面，或者一个td里面有两个按钮
//这个columns.data就完全可以给null了,相应的columns.render().data这里就也是null
//按钮的就是自己在里面拼click事件以及对应的按钮样式了
//return '<a href="javascript:void(0);" onclick="del("'+row.id+'")">' + 删除
// + '</a><a href="javascript:void(0);" onclick="mod("'+row.id+'","'+row.name+'")">' + 编辑 + '</a>';
return '<label>' + row.id + '</label> <label>' + row.name + '</label>';
}
}]
});
</script>
</body>
</html>
