定义表格col
{"field":"key","title":"自定义表单","event":"cellClick"}
点击监听
//监听行工具条 table.on('tool(table)', function(obj){ switch(obj.event){ 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); }) } }); }
文章来源: https://blog.csdn.net/m0_37924754/article/details/90317547