layui table 表格上添加日期控件
方法一：
- 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 表格上添加日期控件的更多相关文章
- DataGrid的列上添加日期控件
今天的使用EasyUI datagrid的时候,遇到了如下问题,如下图:
- uniapp-uView表单中如何添加日期控件？
环境:uniapp,uview-ui,Picker 选择器, 本次我们用uview中的Picker 选择器来写一个日期功能 此选择器有四种弹出模式 一是时间模式,可以配置年,日,月,时,分,秒参数二是 ...
- 在wpf窗体上添加用户控件
1.引用用户控件的命名控件 xmlns:my="clr-namespace:WpfApplicationDemo.Control" 2.把用户控件添加到窗体中 <my:Use ...
- 日期控件My97 DatePicker 的使用
1.解压后添加My97DatePicker文件夹 2.引入WdatePicker.js文件 日期控件My97DatePicker的使用.html <!DOCTYPE html> <h ...
- Webdriver控制翻页控件,并实现向前向后翻页功能，附上代码，仅供参考，其他类似日期控件的功能可以自己封装
新增输入与选择页面的html源码: <div style="margin-top:-60px;" class="modal-content" id=&qu ...
- 介绍Web项目中用到的几款JS日历日期控件和JS文本编辑框插件
第一款日历日期控件:layDate 官方网站:http://laydate.layui.com/ 第二款日历日期控件:my97 官方网站:http://www.my97.net/ 第三款 文本编辑器控 ...
- 【SoDiaoEditor电子病历编辑器】阶段性更新--新增复选框、日期控件、表格排版支持等
转眼距离上一次v2正式发布已经过去一个半月了.github期间不定期push了二十几次,同时感谢分布在广州.福建.上海.北京的一众小伙伴,正是你们给出的建议,才让SoDiaoEditor不断完善. 我 ...
- UI自动化之特殊处理三（日期控件\表格\富文本）
日期控件\表格\富文本也是一些常遇到的需要特殊处理的定位 目录 1.日期控件 2.表格 3.富文本 1.日期控件 第一种:输入框属性为:readonly="readonly" # ...
- mui 时间日期控件(浏览器上无法查看,在手机端可以点击)
<head> <meta charset="utf-8"> <meta name="viewport" content=" ...
随机推荐
- Win10屏幕亮度不能调节，调节无效怎么办？
Win10屏幕亮度不能调节,调节无效怎么办? 听语音 浏览:1027 | 更新:2019-11-22 11:43 1 2 3 4 5 6 7 分步阅读 一些用户在使用win10系统之后,出现了电脑屏幕 ...
- 攻防世界（五）Web_php_include
攻防世界系列:Web_php_include 方法一:大小写绕过 strstr()函数对php我协议进行了过滤,但我们可以尝试大小写绕过 抓包POST传值让其执行我们输入的命令 ?page=Php:/ ...
- Linux_部署日志服务器
一.部署日志服务 1.查看自己的系统是否安装(一般默认安装) [root@localhost ~]# rpm -qa | grep rsyslog rsyslog-8.37.0-13.el8.x86_ ...
- Ubuntu 获取升级信息失败。可能网络有问题
升级Ubuntu系统时遇到的这个问题, 原因是默认的源不是国内的,而且还可能导致下载慢等问题. 1.备份源 cd /etc/apt/ sudo cp sources.list sources.list ...
- ELK学习实验019：ELK使用redis缓存
1 安装一个redis服务 [root@node4 ~]# yum -y install redis 直接启动 [root@node4 ~]# systemctl restart redis [roo ...
- 搜狗拼音输入法v9.6a (9.6.0.3568) 去广告精简优化版本
https://yxnet.net/283.html 搜狗拼音输入法v9.6a (9.6.0.3568) 去广告精简优化版本 软件大小:29.2 MB 软件语言:简体中文 软件版本:去广告版 软件授权 ...
- Heap Size 与 Stack Size
Heap Size:如果没有用到标准库的malloc,就是废物,纯属浪费内存,所以直接设置为0即可: Stack Size :最大的可读写变量的大小即可:
- 微信小程序setdata修改数组或对象
1.this.setdata修改数组的固定一项的值 changeItemInArr: function() { this.setData({ 'arr[0].text':'changed data' ...
- VMware vRealize Network Insight 6.2 发布 - 网络和安全可视化分析
发现.优化应用安全性和网络连接解决方案并对其进行故障排除 VMware vRealize Network Insight 可帮助您跨混合和多云环境构建经过优化且高度可用的安全网络基础架构.它提供了网络 ...
- 八、.net core（.NET 6）配置读取appsettings文件内容的通用功能
添加通用读取配置文件功能 在Wsk.Core.Package项目下,新增Microsoft.Extensions.Configuration包: 在启动项目下,设置appsettings.json属 ...