Datatables拓展功能实现
Datatables是一款Jquery表格插件,可以添加丰富的交互功能。这里我主要想总结一下在使用Datatables时,如何实现一些拓展功能。主要包括我在项目中需要实现功能:双击可编辑单元格、行自增序号。后续会继续更新。
双击可编辑单元格
这个功能主要是实现双击单元格,就可以直接通过输入框来修改单元格中的数据。实现这个功能,我们需要使用Datatables配置项columnDefs
。这个配置项用来设置列定义初始化属性。
示例:1
2
3
4
5
6
7$('#example').dataTable({
"columnDefs": [
{
"targets": [0, 1],
}
]
})
这个参数允许应用到一列或多列,通过culumnDefs.targets
选项来实现,它可以是下列情况:
- 0或者正整数: 列从左到右是从0开始
- 一个负数: 列从右到左的索引(-1代表最后一列)
- 一个字符串–将字符串和类名匹配列
- 字符串”_all”–所有列
我们需要针对单元格创建回调来操作DOM,我们使用culumnDefs.createdCell
配置项。1
function createdCell(cell, cellData, rowData, rowIndex, colIndex)
参数说明:
- cell: 已经创建的td单元格
- cellData: 单元格的数据。如果使用了其他方法修改了数据,使用
$(cell).html()
得到渲染后的数据。这里的数据是来自数据源里没有修改过的原始数据。 - rowData: 整行的数据对象,可能是object或array
- rowIndex: DataTables内部的行索引。
- colIndex: DataTables内部的列索引。
单元格编辑代码实现: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$('#example').dataTable({
"columnDefs": [
{
"targets": [0, 1],
createdCell: function(cell, cellData, rowData, rowIndex, colIndex) {
// 单元格监听doubleclick事件
$(cell).on('dblclick', function() {
// 单元格插入输入框
$(this).html('<input type="text" size="20" style="height: 20px" value="' + $(cell).html() + '"/>');
// 获取输入框
var aInput = $(this).find(":input");
// 聚焦输入框
aInput.focus();
});
// 单元格监听blur事件
$(cell).on("blur", ":input", function () {
// 获取单元格中数据
var text = $(this).val();
// 单元格中写入数据
$(cell).html(text);
// 更新table实例中的数据
table1.cell(cell).data(text)
})
}
}
]
})
行自增序号
这个功能主要是给表中的每一行增加一个序号,添加行或删除行,行序号也可以自动更新。
我们需要使用的是drawCallback
配置项。这个函数会在每次表格重绘后调用。
代码实现如下:1
2
3
4
5
6
7
8
9
10
11$('#example').dataTable({
"columnDefs": [],
drawCallback: function () {
// 实现行序号自增,获取第一列的每一个单元格,进行遍历
this.api().column(0).nodes().each(function(cell, i) {
cell.innerHTML = i + 1;
// 单元格写入自增数据
table1.cell(cell).data(i + 1);
})
}
})
这样只要Datatables有任何变更进行重绘,我们就可以对行的序号进行更新,可以完美满足我们的需求。