layui表格单元格添加时间控件

在HTML中添加一个table，button用来获取修改后的数据

<button class="layui-btn" id="getCheckedData">获得表格选中行</button>
<table id="grid" lay-filter="grid"></table>

关键地方：
1、表头添加event

2、layui加载模块时添加laydate

3、同步更新缓存对应的值

完整js代码如下：

<script>//表格数据var jsonData = [{id: 1,dateStart:"2021-07-15",dateEnd:"2021-07-15",}, {id: 2,dateStart:"2021-07-15",dateEnd:"2021-07-15",}];//表头var col = [{type: 'checkbox'},{field: 'id', title: 'ID',width: 200},{field:'dateStart' ,  align:'center', title:'开始时间',event:'date1', data_field: "dBeginDate",style:'background-color:#fbeef0'},{field:'dateEnd' ,  align:'center', title:'结束时间',event:'date2', data_field: "dBeginDate",style:'background-color:#fbeef0'}]//layui加载模块layui.use(['table', 'layer', 'element', 'jquery', 'form','laydate'], function (table, layer, element, $, form,laydate) {var table = layui.table,$ = layui.$;$('#getCheckedData').click(function () {debugger;// 验证一下下拉选择之后有没有作用到表格缓存数据var checkStatus = table.checkStatus('grid'); //test即为基础参数id对应的值console.log(checkStatus.data); //获取选中行的数据console.log(checkStatus.data.length); //获取选中行数量，可作为是否有选中行的条件console.log(checkStatus.isAll); //表格是否全选});var tableIns = table.render({elem: '#grid',  //table的idwidth: 600,height: 300,data: jsonData,   //数据cols: [col],      //表头done: function () {//数据渲染完的回调}});//事件: 语法：table.on('event(filter)', callback);(event 为内置事件名，filter 为容器 lay-filter 设定的值)//工具条事件:注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"table.on('tool(grid)', function (obj) {var data = obj.data;//获得当前行数据var newdata = {};switch (obj.event) { //obj.event; 得 lay-event 对应的值（也可以是表头的 event 参数对应的值）case 'date1':debugger;var field = $(this).data('field');layui.laydate.render({elem: this.firstChild,show: true ,//直接显示closeStop: this,done: function(value, date) {newdata[field] = value;obj.update(newdata);//同步更新缓存对应的值console.log(newdata);console.log("newdata")}});break;case 'date2':debugger;var field = $(this).data('field');layui.laydate.render({elem: this.firstChild,show: true ,//直接显示closeStop: this,done: function(value, date) {newdata[field] = value;obj.update(newdata);console.log("newdata")}});break;}})});
</script>

效果图:

打印出获取到的值，验证是修改后的日期

layui表格单元格添加时间控件相关推荐

layui表格单元格添加下拉选择功能
layui表格单元格添加下拉选择功能 1.修改表头 2.更新数据 3.修改样式代码如下: <style>/*表格单元格里显示下拉框,添加后样式不对,需要自己调整一下样式使得下拉框与单元格 ...
layui表格单元格样式自定义
layui表格单元格样式自定义在表格渲染完的回调done中操作: 1.匹配行,根据样式进行匹配,可F12查看(最终目的是只匹配到数据行) 2.匹配列,匹配成功后,就可以确定到某个单元格,获取行对应的 ...
html中如何定义斜框,html表格单元格添加斜下框线的方法
一.分隔单元格的方法 1.用"transform: rotate(-55deg);"把一条水平线旋转一定角度就成斜线了 2.利用以下命令调整分割线位置等. :after :befo ...
layui表格单元格中插入下拉框
这个实现采用了layui 社区一位大神的代码,在此感谢大神的分享,我自己做个记录,也给使用layui 的小伙伴们做一个分享. 思路是这样的可以使用自定义模板返回select节点然后在done回调中f ...
layui 日期范围选择器_layui时间控件选择时间范围的实现方法
解决layui时间控件清空之后无法正常使用的问题,以及时间范围的选择共有两种解决方式: 方式一(layui 1.x): html代码: placeholder="开始时间(修改时间)&qu ...
layui在table表格中添加时间控件
timeB为name layui.table.render({elem: '#lay-purchasing-change',id: "layTableId1" ,url: base ...
在 Windows 窗体 DataGridView 单元格中承载控件
DataGridView 控件提供了多种列类型,使得用户可以通过多种方式输入和编辑值.但是,如果这些列类型无法满足数据输入要求,您也可以使用承载所选控件的单元格创建自己的列类型.要做到这一点,必须定义 ...
C# 在DataGridView中，点击单元格调出 TreeView控件或 ListBox控件
1.调出 TreeView控件或 ListBox控件 private void deductGrid1_CellClick(object sender, DataGridViewCellEvent ...
获取layui表格单元格的数据_Layui数据表格之获取表格中所有的数据方法
数据表格中的数据是通过直接赋值的方式.这里实际上思想是反过来的,将拿数据表格中的所有数据,转换为Layui数据表格拿原始数据去渲染数据表格. 1.创建一个作用域合适的JS对象数组用来保存数据表格中的原 ...

layui表格单元格添加时间控件

layui表格单元格添加时间控件相关推荐

最新文章

热门文章