解决layui-table单元格编辑只能text问题,单元格编辑自定义表单类型

匿名 (未验证) 提交于 2019-12-02 23:34:01

解决layui-table单元格编辑只能text问题,单元格编辑自定义表单类型

定义表格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
标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!