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有任何变更进行重绘,我们就可以对行的序号进行更新,可以完美满足我们的需求。