layui table 表格上添加日期控件的两种方法


Posted in Javascript onSeptember 28, 2019

方法一:

var tableInit = table.render({
        elem: '#tbtxrz'
        , method: 'post'
        , data: jsonData
        , height: "auto"
        , id: "tbtxrz"
        , text: {none: '暂无相关数据'}
        , toolbar: toolbartxrz
        , cols: [[
          {
//设置表格中部分字体的颜色
            field: "number", title: "序号", width: 60, align: "left", templet: function (data) {
              return data.LAY_INDEX 
            }
          }
          , {field: "ID", title: "ID", align: "left", hide: true}
          , {field: "sjbs", title: "sjbs", align: "left", hide: true}
          , {field: "xh", title: "xh", align: "left", hide: true}
          , {field: "action", title: "action", align: "left", hide: true}
          , {field: "txmc", title: "<span style='color:#c00'></span>体系名称", width: 140, align: "left", edit: 'text'}
          , {field: "rztxmc", title: "<span style='color:#c00'>*</span>认证体系名称", width: 140, align: 'left', edit: 'text'}
          , {
            field: "rzrq", title: "认证日期", width: 160, align: 'left',event: 'editStartDate',data_field:'rzrq'
          /*  templet: function (d) {
              return ' <input type="text" name="rzrq" class="layui-input layui-input-date" value="' + d.rzrq + '" id="txrzrq'+d['LAY_TABLE_INDEX'] +'">'
            }*/
          }
          , {field: "rzjg", title: "<span style='color:#c00'>*</span>认证机构", width: 140, align: 'left', edit: 'text'}
          , {
            field: "zsdqsj", title: "<span style='color:#c00'>*</span>证书到期时间", width: 160, align: 'left',event: 'editzsdqsj',data_field:'zsdqsj'
           /* templet: function (d) {
              return ' <input type="text" name="zsdqsj" class="layui-input layui-input-date" value="' + d.zsdqsj + '" id="test2">'
            }*/

          }
          , {field: "rzfgcp", title: "认证覆盖产品", width: 140, align: 'left', edit: 'text'}
          , {
            field: "jhrzsj", title: "若无,计划认证时间", width: 160, align: 'left', edit: 'select',

          }
          , {field: "ywjm", title: "原文件名", width: 140, align: 'left'}
          , {
            field: '操作', title: '操作', width: '10%', unresize: true, templet: function (res) {
              return '<button type="button" class="layui-btn layui-btn-xs" data-type="' + res['LAY_TABLE_INDEX'] + '" id="uploadFile' + res['LAY_TABLE_INDEX'] + '" lay-event="upload"><i class="layui-icon layui-icon-upload-drag"></i></button> <button type="button" class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del"><i class="layui-icon layui-icon-delete"></i></button>';
            }
          }
          , {field: "pc", title: "批次", align: 'left', hide: true}
          , {field: "cdmc", title: "cdmc", align: 'left', hide: true}
          , {field: "scsj", title: "scsj", align: 'left', hide: true}
          , {field: "ccm", title: "ccm", align: 'left', hide: true}
          , {field: "xg", title: "xg", align: 'left', hide: true}
          , {field: "fjm", title: "fjm", align: 'left', hide: true}
          , {field: "fjID", title: "fjID", align: 'left', hide: true}
        ]]
        , done: function (res, curr, count) {
          //日期控件
          // 上传文件
          var data = res.data;
          for (var i = 0; i < data.length; i++) {
            var elem = '#uploadFile' + i;
            //循环初始上传组件
            var uploadInst = upload.render({
              elem: elem //绑定元素
              , url: $("#contextpath").val() + '/upload/uploadFile2.do' //上传接口
              , field: 'files'
              , auto: true
              , accept: 'file'
              // ,exts: 'xls|xlsx|csv'
              //添加上传额外参数
              , data: {
                sjbs: function () {
                  var sjbs = $("#sjbs").val();
                  var logId = $("#logId").val();
                  if (sjbs !== null && sjbs.length > 0) {
                    sjbs = sjbs;
                  } else {
                    sjbs = $("#sjbs").attr('name') + new Date().getTime();//设置每次新增的批次
                    $("#sjbs").val($("#sjbs").attr('name') + new Date().getTime());//如果没有创建时间标识,就自己新增
                  }
                  mcs.setSjbs(sjbs);
                  return sjbs;
                }
              }
              //文件上传前回调
              , before: function (obj) {
                //开启加载
                layer.load(2, {time: 10 * 1000, offset: '200px'});
                //从表格缓存中获取table指定行数据
                updateRow = tableRowTool.data;
                var files = this.files = obj.pushFile();
                obj.preview(function (index, file, result) {
                  updateRow['scsj'] = new Date(new Date()).format("yyyy-MM-dd hh:mm:ss");
                  updateRow['ywjm'] = file.name;
                  updateRow['xg'] = 1;
                  // updateRow['wjdx'] = (file.size/1024).toFixed(1) +'kb';
                })
              }
              //上传成功后回调
              , done: function (res, index, upload) {
                txrzxg = true;
                layer.closeAll();
                if (res.status === "Y") {
                  updateRow['ccm'] = res.fileName;
                  updateRow['sjbs'] = res.sjbs;
                  //文件上传成功,更新表格数据
                  tableRowTool.update(updateRow);
                  //文件上传成功后,去掉.layui-table-click Table选中行状态
                  tableRowTool.tr.prop("class", "");
                  layer.msg(res.msg, {
                    icon: 1
                    , time: 2000
                    , offset: '200px'
                  }, function () {

                  })
                } else {
                  layer.msg(res.msg, {
                    icon: 5
                    , time: 2000
                    , offset: '200px'
                  })
                }
                //删除文件队列已经上传成功的文件
                return delete this.files[index];
              }
              //上传错误回调
              , error: function () {
                layer.closeAll();
                //请求异常回调
              }
            });
          }
        layer.closeAll();
        }

      })

处理方法:

//监听行工具事件
    table.on('tool(tbtxrz)', function (obj) {
      var data = obj.data;
      if(obj.event === 'editStartDate'){
        var field = $(this).data('field');
        laydate.render({
          elem: this.firstChild
          , show: true //直接显示
          , closeStop: this
          , done: function (value, date) {
            data[field] = value;
            obj.update(data);
          }
        });
      }
      else if (obj.event='editzsdqsj'){
        var field = $(this).data('field');
        laydate.render({
          elem: this.firstChild
          , show: true //直接显示
          , closeStop: this
          , done: function (value, date) {
            data[field] = value;
            obj.update(data);
          }});
      }

    });

方法二:不建议使用,因为不够灵活

js代码:

var layer = layui.layer, form = layui.form, table = layui.table;
      var $ = layui.$;
      /*select gysmc,zyzw ,xm ,sjhm ,bgshm ,emilyx ,
      zgsrgzwsj ,zggsgl ,cast(gysxxid as int) as gysxxid, pc,
       gysryxxMdataID as ID,sjbs from gysryxxMdata*/
      var tableInit = table.render({
        elem: '#tbgysplay'
        , method: 'post'
        , data: jsonData
        , height: "auto"
        , id: "tbgysplay"
        , text: {none: '暂无相关数据'}
        , toolbar: "#toolbarplan"
        , cols: [[
          {type: "checkbox", fixed: "left", width: 50}
          , {
            field: "number", title: "序号", width: '10%', align: "left", templet: function (data) {
              return data.LAY_INDEX
            }
          }
          , {field: "ID", title: "ID", align: "left", hide: true}
          , {field: "action", title: "action", align: "left", hide: true}
          , {field: "sjbs", title: "sjbs", align: "left", hide: true}
          , {field: "供应商名称", title: "供应商名称", width: '15%', align: "left"}
          , {field: "主要产品类型", title: "主要产品类型", width: '15%', align: 'left'}
          , {field: "所在省份", title: "所在省份", width: '15%', align: 'left'}





, {
  





 field: "PSA计划时间", title: "PSA计划时间", width: '20%', align: 'left', templet:function (d) {
   
   



    return  ' <input type="text" class="layui-input layui-input-date" value="'+d.PSA计划时间+'" id="test1">'
 





 }

}
, {field: "PSA计划负责人", title: "PSA计划负责人", align: 'left',edit:'text'} ]] , done: function (res) {//当数据渲染完后,执行的回调 //日期控件 $(".layui-input-date").each(function (i) { layui.laydate.render({ elem: this, format: "yyyy-MM-dd", done: function (value, date) { if (res && res.data[i]) { $.extend(res.data[i], {'PSA计划时间': value}) } } }); }); layer.closeAll(); } });

以上这篇layui table 表格上添加日期控件的两种方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery动态创建DOM、表单元素的实现代码
Aug 09 Javascript
js返回上一页并刷新代码整理
Dec 21 Javascript
js图片处理示例代码
May 12 Javascript
在JavaScript中处理数组之reverse()方法的使用
Jun 09 Javascript
javascript 用函数实现继承详解
May 28 Javascript
AngularJS 视图详解及示例代码
Aug 17 Javascript
AngularJS中directive指令使用之事件绑定与指令交互用法示例
Nov 22 Javascript
JS基于面向对象实现的选项卡效果示例
Dec 20 Javascript
vue实现在表格里,取每行的id的方法
Mar 09 Javascript
小程序图片长按识别功能的实现方法
Aug 30 Javascript
three.js利用射线Raycaster进行碰撞检测
Mar 12 Javascript
解决VUEX的mapState/...mapState等取值问题
Jul 24 Javascript
Layui选项卡制作历史浏览记录的方法
Sep 28 #Javascript
Layui带搜索的下拉框的使用以及动态数据绑定方法
Sep 28 #Javascript
layui的select联动实现代码
Sep 28 #Javascript
关于layui的下拉搜索框异步加载数据的解决方法
Sep 28 #Javascript
layui的数据表格+springmvc实现搜索功能的例子
Sep 28 #Javascript
layui下拉列表select实现可输入查找的方法
Sep 28 #Javascript
解决layui下拉框监听问题(监听不到值的变化)
Sep 28 #Javascript
You might like
PHP和JAVA中的重载(overload)和覆盖(override) 介绍
2012/03/01 PHP
php版微信公众账号第三方管理工具开发简明教程
2016/09/23 PHP
PHP实现的简单异常处理类示例
2017/05/04 PHP
PHP中number_format()函数的用法讲解
2019/04/08 PHP
搭建PhpStorm+PhpStudy开发环境的超详细教程
2020/09/17 PHP
随机显示经典句子或诗歌的javascript脚本
2007/08/04 Javascript
javascript各种复制代码收集
2008/09/20 Javascript
div+css布局的图片连续滚动js实现代码
2010/05/04 Javascript
contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
2011/09/13 Javascript
Javascript基础教程之for循环
2015/01/18 Javascript
javascript实现拖动元素交换位置
2015/11/29 Javascript
果断收藏9个Javascript代码高亮脚本
2016/01/06 Javascript
Ajax基础知识详解
2017/02/17 Javascript
Vue cli 引入第三方JS和CSS的常用方法分享
2018/01/20 Javascript
react.js组件实现拖拽复制和可排序的示例代码
2018/08/20 Javascript
js tab栏切换代码实例解析
2019/09/03 Javascript
JavaScript代码压缩工具UglifyJS和Google Closure Compiler的基本用法
2020/04/13 Javascript
关于IDEA中的.VUE文件报错 Export declarations are not supported by current JavaScript version
2020/10/17 Javascript
实现vuex原理的示例
2020/10/21 Javascript
Vue中的nextTick作用和几个简单的使用场景
2021/01/25 Vue.js
[02:38]DOTA2亚洲邀请赛小组赛精彩集锦:Wings完美团击溃对手
2017/03/29 DOTA
Python中的生成器和yield详细介绍
2015/01/09 Python
在Python中使用PIL模块处理图像的教程
2015/04/29 Python
python图书管理系统
2020/04/05 Python
详解python tkinter教程-事件绑定
2019/03/28 Python
Python中字符串String的基本内置函数与过滤字符模块函数的基本用法
2019/05/27 Python
python实现微信小程序用户登录、模板推送
2019/08/28 Python
python 判断txt每行内容中是否包含子串并重新写入保存的实例
2020/03/12 Python
HTML5 input元素类型:email及url介绍
2013/08/13 HTML / CSS
Skyscanner新西兰:全球领先的旅游搜索网站
2019/08/26 全球购物
英国伦敦的睡衣品牌:Asceno
2019/10/06 全球购物
乡镇八一建军节活动方案
2014/08/24 职场文书
入股合作协议书
2014/10/12 职场文书
大学生党员个人总结
2015/02/13 职场文书
美容院管理规章制度
2015/08/05 职场文书
JUnit5常用注解的使用
2021/07/02 Java/Android