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;
          }
      });
  });


相关文章
layUI数据表格可编辑表格单元格值修改之后获取修改前的值
layUI数据表格可编辑表格单元格值修改之后获取修改前的值
655 0
Layui 内置方法 - layer.confirm(询问框)
Layui 内置方法 - layer.confirm(询问框)
1875 0
|
JavaScript
jQuery学习(七)— append方法与appendTo方法
jQuery学习(七)— append方法与appendTo方法
layUI数据表格可编辑扩展下拉框
layUI数据表格可编辑扩展下拉框
459 0
|
存储 运维 关系型数据库
运维常见的22个故障排查和10个问题解决技巧大汇总!
运维常见的22个故障排查和10个问题解决技巧大汇总!
1390 0
|
Java 关系型数据库 MySQL
基于SpringBoot+Vue的会员管理系统 (源码+部署说明+演示视频+源码介绍)(1)
基于SpringBoot+Vue的会员管理系统 (源码+部署说明+演示视频+源码介绍)
378 0
|
SQL NoSQL 关系型数据库
13 秒插入 30 万条数据,这才是批量插入正确的姿势!
【8月更文挑战第9天】在数据处理和数据库管理中,高效批量插入数据是一项至关重要的技能。无论是大数据分析、日志处理还是业务数据快速导入,高效的批量插入能力都能显著提升系统性能和用户体验。今天,我们就来深入探讨如何在极短时间内(如13秒内)向数据库批量插入30万条数据,分享那些被验证过的高效技术和最佳实践。
1395 0
|
Java Apache Maven
Java:commons-codec实现byte数组和16进制字符串转换
在上述代码中,`Hex.encodeHexString(bytes)`用于将byte数组转换为16进制字符串,`Hex.decodeHex(hexString)`用于将16进制字符串转换为byte数组。
444 0
|
前端开发
如何实现CSS中flex布局最后一行左对齐?
前言 flex布局目前已经非常流行了,它基本上可以完成大部分的布局需求。早一些的float布局、表格布局等等便没有那么受欢迎了。但是任何事物都不是完美的,flex布局也一样,它也有瑕疵,就比如我们今天所要讲的flex布局中最后一行对齐问题。
2780 0
如何实现CSS中flex布局最后一行左对齐?