<script>
layui.use(['admin', 'table', 'view', 'laydate', 'form', 'layer'], function () {
var $ = layui.$
,admin = layui.admin
,element = layui.element
,form = layui.form
,view = layui.view
,layer = layui.layer
,laydate = layui.laydate
,table = layui.table
,router = layui.router();
table.render({
elem: '#taskfill_list'
,url: layui.setter.baseUrl + 'admin/alilite/order_task_list'
,parseData: function (res) { //res 即为原始返回的数据
res.data.list.forEach(item=>{
item.start_time = layui.util.toDateString(item.start_time * 1000, 'yyyy-MM-dd HH:mm');
item.end_time = layui.util.toDateString(item.end_time * 1000, 'yyyy-MM-dd HH:mm');
})
return {
"code": res.code, //解析接口状态
"msg": res.msg, //解析提示文本
"count": res.data.count, //解析数据长度
"data": res.data.list //解析数据列表
};
}
,cols: [[
{ field: 'id', width: 100, title: 'ID', sort: true, align: 'center' }
,{ field: 'username', title: '执行人', align: 'center' }
,{ field: 'name', title: '任务名称', align: 'center' }
,{ field: 'start_time', width: 150, title: '开始时间', event: 'editStartDate', align: 'center'}
,{ field: 'end_time', width: 150, title: '截止时间', event: 'editEndDate', align: 'center'}
,{ field: 'remark', title: '备注', edit: 'text', align: 'center' }
]]
,page: true
});
//监听工具条
table.on('tool(taskfill_list)', function (obj) {
var data = obj.data;
if (obj.event === 'editStartDate') {
// 时间控件
var field = $(this).data('field');
laydate.render({
elem: this.firstChild ,value: data.start_time
,type: 'datetime' ,format: 'yyyy-MM-dd HH:mm' ,closeStop: this
,show: true //直接显示
,done: function (value, date) {
data[field] = value;
obj.update(data);
}
});
} else if(obj.event==='editEndDate'){
// 时间控件
var field = $(this).data('field');
laydate.render({
elem: this.firstChild ,value: data.end_time
,type: 'datetime' ,format: 'yyyy-MM-dd HH:mm' ,closeStop: this
,show: true //直接显示
,done: function (value, date) {
data[field] = value;
obj.update(data);
}
});
}
});
});
</script>
【layui】数据表格table动态添加时间控件
于 2023-05-08 14:25:14 首次发布