Layui 的数据表格提供单元格编辑的功能,这个功能还是很方便实用,但是单元格编辑功能仅支持单纯的文本输入,无法执行其他操作,而有时我们需要在输入框输入日期,想要调用日期插件时,这时单纯的单元格编辑功能就不满足需求了。

这里需要注意一下紧紧挨着edit下方的event事件,这个东西比edit更强大灵活,相较于edit来说event更偏向灵活定制各种单元格点击事件的业务处理而非固定某个操作。这里借助event实现点击单元格编辑时弹出日期插件选择日期,完成对应日期的编辑操作。
表头基础参数
<th lay-data="{field:'xxx',event:'date'}">时间</th>//这里定义一个名为date的event事件。
js代码
table.on('tool(test)', function(obj){ //注:tool 是工具条事件名,test 是 table 原始容器的属性 lay-filter="对应的值"
var data = obj.data; //获得当前行数据
var layEvent = obj.event; //获得 lay-event 对应的值(也可以是表头的 event 参数对应的值)
var tr = obj.tr; //获得当前行 tr 的 DOM 对象(如果有的话)
if (obj.event === 'date') {
var field = $(this).data('field');
laydate.render({
elem: this.firstChild
, show: true //直接显示
, closeStop: this
, type: 'datetime'
, format: "yyyy-MM-dd HH:mm:ss"
, done: function (value, date) {
//得到日期值做一些处理,如请求接口更新日期等等
obj.update(value);
}
});
}
});