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 相关文章推荐
javascript数字数组去重复项的实现代码
Dec 30 Javascript
jquery win 7透明弹出层效果的简单代码
Aug 06 Javascript
单击某一段文字改写文本颜色
Jun 06 Javascript
js插件设置innerHTML时在IE8下提示“未知运行时错误”解决方法
Apr 25 Javascript
再谈JavaScript线程
Jul 10 Javascript
JavaScript如何调试有哪些建议和技巧附五款有用的调试工具
Oct 28 Javascript
jQuery与JS加载事件用法分析
Sep 04 Javascript
详解JavaScript的闭包、IIFE、apply、函数与对象
Dec 21 Javascript
H5手机端多文件上传预览插件
Apr 21 Javascript
Javascript实现一个简单的输入关键字添加标签效果实例
Jun 01 Javascript
解决Layui数据表格的宽高问题
Sep 28 Javascript
javascript如何实现create方法
Nov 04 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
jQuery中的RadioButton,input,CheckBox取值赋值实现代码
2014/02/18 PHP
PHP5各个版本的新功能和新特性总结
2014/03/16 PHP
CI框架中zip类应用示例
2014/06/17 PHP
ThinkPHP实现更新数据实例详解(demo)
2016/06/29 PHP
PHP入门教程之PHP操作MySQL的方法分析
2016/09/11 PHP
PHP小偷程序的设计与实现方法详解
2016/10/15 PHP
深入理解Yii2.0乐观锁与悲观锁的原理与使用
2017/07/26 PHP
javascript document.images实例
2008/05/27 Javascript
ie focus bug 解决方法
2009/09/03 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器(优化篇)
2013/06/28 Javascript
JS实现简单的Canvas画图实例
2013/07/04 Javascript
jQuery统计上传文件大小的方法
2015/01/24 Javascript
JavaScript匿名函数用法分析
2015/02/13 Javascript
JavaScript使用setTimeout实现延迟弹出警告框的方法
2015/04/07 Javascript
Js实现无刷新删除内容
2015/04/29 Javascript
js实现仿Discuz文本框弹出层效果
2015/08/13 Javascript
jQuery实现只允许输入数字和小数点的方法
2016/03/02 Javascript
浅析jQuery操作select控件的取值和设值
2016/12/07 Javascript
ES6中Symbol类型用法实例详解
2017/04/06 Javascript
layer.open关闭父窗口 以及调用父页面的方法
2018/08/17 Javascript
Vue 莹石摄像头直播视频实例代码
2018/08/31 Javascript
layui+jquery支持IE8的表格分页方法
2019/09/28 jQuery
Antd的Table组件嵌套Table以及选择框联动操作
2020/10/24 Javascript
[52:57]2014 DOTA2国际邀请赛中国区预选赛 LGD-CDEC VS HGT
2014/05/21 DOTA
Python数据类型详解(三)元祖:tuple
2016/05/08 Python
浅谈Pandas 排序之后索引的问题
2018/06/07 Python
美国中西部家用医疗设备商店:Med Mart(轮椅、踏板车、升降机等)
2019/04/26 全球购物
Nike澳大利亚官网:Nike.com (AU)
2019/06/03 全球购物
100%法国制造的游戏和玩具:Les Jouets Français
2021/03/02 全球购物
工业设计专业推荐信
2013/10/29 职场文书
机械绘图员岗位职责
2013/11/19 职场文书
公司董事长职责
2013/12/12 职场文书
四个太阳教学反思
2014/02/01 职场文书
名人演讲稿范文
2014/09/16 职场文书
幼儿园新学期开学寄语
2015/05/27 职场文书
四年级作文之植物
2019/09/20 职场文书