添加layui-table单元格编辑时间控件或者自定义表单
样式如下:
实例代码如下
1.定义表格
<table id="viewTable" lay-filter="viewTable"></table>
2.定义表头
{field: 'solveTime', title: '预计解决时间',edit: 'text',style:'background-color: rgba(60,141,188,0.1)', event: 'date' },// 事件, 对应下面 },
{"field":"key","title":"自定义表单","event":"cellClick"}//这个是表单添加
3.定义点击事件
table.on('tool(viewTable)', function (obj) {
var data = obj.data,layEvent = obj.event;
let newdata={}
switch (layEvent) {
case "date":
var field = $(this).data('field');
laydate.render({
elem: this.firstChild // 固定写
, show: true //直接显示
, closeStop: this
, type: 'date'
, format: "yyyy-MM-dd"
, done: function (value, date) {
newdata[field] = value;
obj.update(newdata);
//下面是写好的编辑ajax,可以进行编辑
}
});
break;
case 'cellClick':
CellClick(this,obj);
break;
}
});
function CellClick(that,obj){
//当前点击字段
var field = $(that).data("field");
//判断是否需要添加编辑框
if(field=="edit")return true;
//当前行数据
var data = obj.data;
//当前单元格的值
var value = data[field];
//当前点击td的宽高
var height = $(that)[0].offsetHeight,width = $(that)[0].offsetWidth;
//当前点击td的坐标
var top = $(that).offset().top,left = $(that).offset().left;
//输入框 这里可以自定义表单内容
var input = '<input type="number" class="layui-input" id="'+field+'_input" data-field="'+field+'" style="width:'+width+'px;height:'+height+'px">';
//弹出层
layer.open({
type: 1
,title:false
,page:true
,limit:1
,closeBtn:0
,area: [width+"px", height+"px"]
,shade: [0.01, '#fff']
,shadeClose:true
,content: input //这里content是一个普通的String
,offset:[top,left]
,success:function(){
//使弹出层相对定位
$(".layui-layer-page").css("position","absolute")
//设置输入框的值
$("#"+field+"_input").val(value);
$("#"+field+"_input").blur(function(){
//同步更新缓存对应的值
data[field] = $(this).val();
obj.update(data);
})
}
});
}