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;i0){
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表格上添加日期控件的两种方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。