table+laydate实现修改表格中日期

分享 已结 1 125
请叫我大懒男皇
悬赏:20飞吻
才接触layui,新手一枚。写demo的时候找了半天没找到table结合date的demo。自己鼓捣了半天才鼓捣出来。希望有大佬指导下。
直接贴代码了
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="./lib/layui/css/layui.css">
<script src="./lib/layui/layui.js"></script>
<script src="./js/main.js"></script>
</head>
<body>
<table id="tabledemo" lay-filter="tabledemo"></table>
<button class="layui-btn" data-type="getTableData">获取选中行数据</button>
</body>
</html>
layui.use(["laydate","table"],function(laydate,table){


var t = table.render({
id:"tabletest",
elem:"#tabledemo",
cols:[[
{type: 'checkbox'},
{
field:"id",
title:"ID"
},
{
field:"name",
title:"姓名"
},
{
field:"sex",
title:"性别"
},
{
field:"age",
title:"年龄"
},
{
field:"birthday",
title:"出生日期",
templet:function(data){
if(!data.birthday){
data.birthday="";
}
return '<div class="layui-input" row-index="'+data.LAY_TABLE_INDEX+'" id="datetemplete_'+data.LAY_TABLE_INDEX+'">'+data.birthday+'</div>'
},
event:"initDate"
}
]],
data:[
{
id:"1",
name:"张三",
sex:"男",
age:"22",
birthday:"1999-11-11"
},
{
id:"2",
name:"李四",
sex:"男",
age:"22",
birthday:"2012-12-12"
},
{
id:"3",
name:"王五",
sex:"男",
age:"22",
birthday:"1999-12-12"
},
{
id:"4",
name:"王把",
sex:"男",
age:"22"
},
{
id:"5",
name:"李七",
sex:"男",
age:"22"
}
],
page: {
layout: [ 'count','limit', 'prev', 'page', 'next', 'skip',"refresh"],
groups: 1,
// limit:2
}
});
table.on("tool(tabledemo)",function(obj,e){
var data = obj.data;
var index =obj.tr[0].getAttribute("data-index");
if(obj.event=="initDate"){
var a =laydate.render({
elem: '#datetemplete_'+index,
event:"initDate",
value:data.birthday,
done:function(date){
var rowIndex = this.elem[0].getAttribute("row-index");
t.config.data[rowIndex].birthday=date;
}
});
a.config.elem[0].click();
if(window.event){
window.event.stopPropagation();
}
}
});
layui.$(".layui-btn").on("click",function(){
var data = table.checkStatus("tabletest").data;
alert(JSON.stringify(data));
});

})
回帖
  • My_my
    2019-8-6
    https://sun_zoro.gitee.io/layuitableplug/testTableCheckboxDisabled
    1 回复