layUI数据表格可编辑扩展日期框

简介: layUI数据表格可编辑扩展日期框


  1. 字段定义模版: {field: 'layuiData', title: '日期框', templet: '#layuiDataGxmc'}
  2. 模版内容
<script type="text/html" id="layuiDataGxmc"> 
  <input type="text" class="layui-input takeDate" name="layuiData" style="margin-top: -4%" readonly="readonly">
</script>
  1. 在代码里执行步骤4:layui.use(['table', 'layer', 'element', 'jquery', 'form','laydate'], function(table, layer, element, $, form,laydate){});
  2. 渲染日期框
/* 
多次对一个dom节点绑定laydate的原因,因为open之后都会对那个dom进行laydate.render,建议如果你open的的content还是要打开那个content的话可以给那个input加一个状态记录,初始化没有,open之后render之后就给他设置为true,每次open都检验是否已经render过,如果没有再做渲染。
  */
  /*
  //执行第一个laydate实例   //第一行的日期框不能同时渲染出来(不知道为啥)单独写了一个
  laydate.render({
    elem: '.takeDate' //指定元素
    ,done: function(value, date, endDate){
          $('.takeDate').change();
            console.log(value); //得到日期生成的值,如:2017-08-18
            console.log(date); //得到日期时间对象:{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
            console.log(endDate); //得结束的日期时间对象,开启范围选择(range: true)才会返回。对象成员同上。
          var elem = $(this.elem[0]);
                var trElem = elem.parents('tr');
                var tableData = table.cache['grid'];
                // 更新到表格的缓存数据中,才能在获得选中行等等其他的方法中得到更新之后的值
                tableData[trElem.data('index')][elem.attr('name')] = value;
          }
  });*/
  //执行初一个外的其他laydate实例
  lay('.takeDate').each(function() {
      laydate.render({
        elem: this
        ,done: function(value, date, endDate){
          $('.takeDate').change();
            console.log(value); //得到日期生成的值,如:2017-08-18
            console.log(date); //得到日期时间对象:{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
            console.log(endDate); //得结束的日期时间对象,开启范围选择(range: true)才会返回。对象成员同上。
          var elem = $(this.elem);
                var trElem = elem.parents('tr');
                var tableData = table.cache['grid'];
                // 更新到表格的缓存数据中,才能在获得选中行等等其他的方法中得到更新之后的值
                tableData[trElem.data('index')][elem.attr('name')] = value;
          }
      });
  });


相关文章
|
12月前
layUI数据表格可编辑扩展下拉框
layUI数据表格可编辑扩展下拉框
175 0
|
12月前
layUI数据表格可编辑表格单元格值修改之后获取修改前的值
layUI数据表格可编辑表格单元格值修改之后获取修改前的值
331 0
|
12月前
|
JavaScript
Layui数据表格嵌套文件上传按钮
Layui数据表格嵌套文件上传按钮
201 0
PyQt5 技术篇-QTableWidget表格组件指定行的隐藏与显示控制实例演示,设置表格指定列的列宽方法
PyQt5 技术篇-QTableWidget表格组件指定行的隐藏与显示控制实例演示,设置表格指定列的列宽方法
678 0
PyQt5 技术篇-QTableWidget表格组件指定行的隐藏与显示控制实例演示,设置表格指定列的列宽方法
|
6月前
elementUI 写一个表头列名、表体单元格样式、翻页器相对较为动态的表格el-table
elementUI 写一个表头列名、表体单元格样式、翻页器相对较为动态的表格el-table
elementUI 写一个表头列名、表体单元格样式、翻页器相对较为动态的表格el-table
|
12月前
LayUI数据表格复选框显示不居中问题
LayUI数据表格复选框显示不居中问题
|
12月前
在TableViewer中如何给表格的单元格增加其他组件的编辑功能
在TableViewer中如何给表格的单元格增加其他组件的编辑功能
50 0
|
12月前
layui数据表格格式化
layui数据表格格式化
|
存储 前端开发 数据库
el-table表格拖动列记住列宽度功能(刷新页面还在)
el-table表格拖动列记住列宽度功能(刷新页面还在)
434 0