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数据表格可编辑表格单元格值修改之后获取修改前的值
688 0
layUI数据表格可编辑扩展下拉框
layUI数据表格可编辑扩展下拉框
510 0
Layui 内置方法 - layer.confirm(询问框)
Layui 内置方法 - layer.confirm(询问框)
1902 0
|
小程序
小程序滚动时使标题背景颜色改变
小程序滚动时使标题背景颜色改变
324 0
|
JavaScript 前端开发
layui下拉框xm-select自定义搜索使用方法
【10月更文挑战第28天】`xm - select` 是基于 Layui 的下拉框增强插件,支持自定义搜索功能。实现步骤包括:1. 引入 Layui 和 xm - select 的核心文件;2. 创建下拉框的基本 HTML 结构;3. 使用 `layui.use` 函数初始化插件并配置搜索功能;4. 可选地进行高级自定义搜索优化,如模糊匹配、多字段搜索和实时更新数据。通过这些步骤,可实现灵活的下拉框搜索功能。
3399 1
|
SQL NoSQL 关系型数据库
13 秒插入 30 万条数据,这才是批量插入正确的姿势!
【8月更文挑战第9天】在数据处理和数据库管理中,高效批量插入数据是一项至关重要的技能。无论是大数据分析、日志处理还是业务数据快速导入,高效的批量插入能力都能显著提升系统性能和用户体验。今天,我们就来深入探讨如何在极短时间内(如13秒内)向数据库批量插入30万条数据,分享那些被验证过的高效技术和最佳实践。
1476 0
|
Java 关系型数据库 MySQL
基于SpringBoot+Vue的会员管理系统 (源码+部署说明+演示视频+源码介绍)(1)
基于SpringBoot+Vue的会员管理系统 (源码+部署说明+演示视频+源码介绍)
407 0
|
JavaScript
使用layui checkbox复选框样式实现单选功能
使用layui checkbox复选框样式实现单选功能
778 0
|
前端开发
如何实现CSS中flex布局最后一行左对齐?
前言 flex布局目前已经非常流行了,它基本上可以完成大部分的布局需求。早一些的float布局、表格布局等等便没有那么受欢迎了。但是任何事物都不是完美的,flex布局也一样,它也有瑕疵,就比如我们今天所要讲的flex布局中最后一行对齐问题。
2844 0
如何实现CSS中flex布局最后一行左对齐?
|
JavaScript 前端开发 搜索推荐
JS经典案例-无缝滚动轮播图(纯JS)
JS经典案例-无缝滚动轮播图(纯JS)
1143 0