使用layui做数据表格使用下拉框并实现删除功能和时间选择器

一、再layui官网上查看数据表格的使用方式

查看代码实例不使用 toolbar工具栏，分页功能之类的就不在创建渲染实例的声明

二、根据你要完成表格设计稿完成数据表格中使用下拉框和时间选择器

 以图为例，思考使用的是layui的数据表格，表格中使用了下拉框，还有最后一列相当于操作列可以使用toolbar在对应列去绑定模板

以图为例，思考使用的是layui的数据表格，表格中使用了时间选择器，可以通过绑定模板和绑定事件去实现，当时间选择器触发后选择时间找到相对应的模板将时间进行渲染

 

 这里可以发现每个时间选择器的id要是唯一的，才能触发不同行的，否则会发现触发完成后所有行的时间是一样的。这里我们通过{{d.LAY_TABLE_INDEX}}去绑定他的index

三、代码实现 

1.下拉框和删除列的代码

2.时间选择器和删除列的代码（这里只对上面下拉菜单的第一列进行了改造变成了时间选择器）

注意：这里数据表格中使用下拉框时会被表格挡住，所以在他的实例化的done回调函数中   $(".layui-table-body, .layui-table-box, .layui-table-cell").css('overflow','visible');将本身数据表格超出隐藏设置为超出后显示并且不把父级撑开。

 实现效果：
1.下拉菜单的

2.时间选择器