layui table 表格上添加日期控件的两种方法
方法一:
vartableInit=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){ returndata.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:"体系名称",width:140,align:"left",edit:'text'} ,{field:"rztxmc",title:" *认证体系名称",width:140,align:'left',edit:'text'} ,{ field:"rzrq",title:"认证日期",width:160,align:'left',event:'editStartDate',data_field:'rzrq' /*templet:function(d){ return' ' }*/ } ,{field:"rzjg",title:" *认证机构",width:140,align:'left',edit:'text'} ,{ field:"zsdqsj",title:" *证书到期时间",width:160,align:'left',event:'editzsdqsj',data_field:'zsdqsj' /*templet:function(d){ return' ' }*/ } ,{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' '; } } ,{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){ //日期控件 //上传文件 vardata=res.data; for(vari=0;i 0){ sjbs=sjbs; }else{ sjbs=$("#sjbs").attr('name')+newDate().getTime();//设置每次新增的批次 $("#sjbs").val($("#sjbs").attr('name')+newDate().getTime());//如果没有创建时间标识,就自己新增 } mcs.setSjbs(sjbs); returnsjbs; } } //文件上传前回调 ,before:function(obj){ //开启加载 layer.load(2,{time:10*1000,offset:'200px'}); //从表格缓存中获取table指定行数据 updateRow=tableRowTool.data; varfiles=this.files=obj.pushFile(); obj.preview(function(index,file,result){ updateRow['scsj']=newDate(newDate()).format("yyyy-MM-ddhh: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-clickTable选中行状态 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' }) } //删除文件队列已经上传成功的文件 returndeletethis.files[index]; } //上传错误回调 ,error:function(){ layer.closeAll(); //请求异常回调 } }); } layer.closeAll(); } })
处理方法:
//监听行工具事件 table.on('tool(tbtxrz)',function(obj){ vardata=obj.data; if(obj.event==='editStartDate'){ varfield=$(this).data('field'); laydate.render({ elem:this.firstChild ,show:true//直接显示 ,closeStop:this ,done:function(value,date){ data[field]=value; obj.update(data); } }); } elseif(obj.event='editzsdqsj'){ varfield=$(this).data('field'); laydate.render({ elem:this.firstChild ,show:true//直接显示 ,closeStop:this ,done:function(value,date){ data[field]=value; obj.update(data); }}); } });
方法二:不建议使用,因为不够灵活
js代码:
varlayer=layui.layer,form=layui.form,table=layui.table; var$=layui.$; /*selectgysmc,zyzw,xm,sjhm,bgshm,emilyx, zgsrgzwsj,zggsgl,cast(gysxxidasint)asgysxxid,pc, gysryxxMdataIDasID,sjbsfromgysryxxMdata*/ vartableInit=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){ returndata.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'' } } ,{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();}});
以上这篇layuitable表格上添加日期控件的两种方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持毛票票。