layui-tableセル編集がテキスト、layui-tableセル編集時間コントロール、カスタムフォームコントロールのみである問題を解決

layui-table セル編集カスタム フォーム タイプ、時間コントロール、ナンバー ボックス、ドロップダウン選択、ラジオ選択、その他のフォーム コントロール

テーブルの列を定義する

{
    
    "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);
			})
		}
	});
}

効果

デモリソースのダウンロード