layui的table可编辑扩展下拉框编辑器

layui的table单元格编辑类型（默认不开启）目前只支持：text（输入框）。

需求希望能使用下拉框编辑。

最终效果图：

实现原理：

1.单元格内容使用layui的templet功能。如： {field:'jtcyGxmc', title: '关系名称',templet: '#selectGxmc',sort:false} 

2.然后单元格内容就变成了可编辑的下拉框。

3.样式可能不太对。需要调整下样式。

/* 防止下拉框的下拉列表被隐藏---必须设置--- */        
.layui-table-cell {            overflow: visible !important;        } 
/* 使得下拉框与单元格刚好合适 */       
td .layui-form-select{
	margin-top: -10px;
	margin-left: -15px;
	margin-right: -15px;
}     

4.然后就是数据同步问题了。就是显示的下拉框数据要与表格内部的数据一致。

注意：同步后需要调用form.render();重新渲染下拉框的值才会选中对应的值。

/***
 * 初始化家庭成员
 */
function initJtcy( tableData){
	tableData = tableData || []; 
	table.render({
	    elem: '#listTableJtcy'
	    ,data:tableData  
	    ,sortType:'server'
	    ,height: 570
	    ,limit: 1000  //如果不设置limit，则默认最多10行数据。
	    ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
	    ,toolbar: '
新增
'
	    ,cols: [[
	       {type:'numbers', title: '序号',width:80,align:'center' }
	    	   ,{field:'jtcyJlxh', title: '记录id',sort:false,hide:true} 
	    	   ,{field:'jtcyGxmc', title: '关系名称',templet: '#selectGxmc',sort:false} 
	    	   ,{field:'jtcyXm', title: '姓名',sort:false,edit:"text"} 
	    	   ,{field:'jtcyGzdz', title: '工作单位及职务',sort:false,edit:"text"} 
	    	   ,{field:'jtcyLxfs', title: '联系方式',sort:false,edit:"text"} 
	    	   ,{field:'jtcyZzmm', title: '政治面貌',sort:false,edit:"text"} 
	    	   ,{field:'jtcyCsny', title: '出生年月',sort:false,edit:"text"} 
	    	   ,{field:'jtcyJbxxJlxh', title: '档案id',sort:false,hide:true,edit:"text"} 
	      ,{fixed: 'right', width:178, align:'center', width:80,title: '操作'
	    	  ,templet: function(row){
  	  			var barBtnsHTML = '删除';
			   return barBtnsHTML;
    	  	}
	      } //单元格内容水平居中
	    ]]
	  	,id: 'listTableIdJtcy'
	  	//,page: true
	  });
	updateCacheOrForm("listTableJtcy", "listTableIdJtcy", "form");
	//监听新增和删除
	table.on('tool(listMainTableJtcy)', function(obj){
		var data = obj.data;
	    if(obj.event === 'delJtcy'){
	    	obj.del();
	    } 
	});
}

/***
 * op="cache",则更新表格数据，将表格编辑控件数据更新到缓存table.cache[tableCacheId]; 
 * op="form"，则从缓存table.cache[tableCacheId]获取数据更新表格对应的下拉框，日期等控件。
 * op: 取值cache或者form。默认form
 */
function updateCacheOrForm(tableId, tableCacheId, op){
	op = op || "form";
	var divForm = $("#" + tableId).next();
	var tableCache = table.cache[tableCacheId]; 
	var trJqs = divForm.find(".layui-table-body tr");
	trJqs.each(function(){
		var trJq = $(this);
		var dataIndex = trJq.attr("data-index");
		trJq.find("td").each(function(){
			var tdJq = $(this);
			var fieldName = tdJq.attr("data-field");
			//var fieldName = selectJq.eq(0).attr("name");
			//更新select数据
			var selectJq = tdJq.find("select");
			if(selectJq.length == 1){
				if(op == "cache"){
					tableCache[dataIndex][fieldName] = selectJq.eq(0).val();
				}else if(op == "form"){
					selectJq.eq(0).val(tableCache[dataIndex][fieldName])
				}
			}
		});
	});
	return tableCache;
}

5.接下来提交数据给后台更新数据库。

/***
 * 提交表单
 */
function comitFrm(_url, _title){
	 form.on('submit(edit-lay-filter)', function(data){
	 	var requestParams = data.field;
	 	updateCacheOrForm("listTableJtcy", "listTableIdJtcy", "cache");
	 	var jtcyList = table.cache["listTableIdJtcy"]; 
	 	var jyjlList = table.cache["listTableIdJyjl"]; 
	 	var gzjlList = table.cache["listTableIdGzjl"]; 
	 	var zcprList = table.cache["listTableIdZcpr"]; 
	 	var zgzsList = table.cache["listTableIdZgzs"]; 
	 	$.extend( requestParams, formatParams(jtcyList,"jtcy") );
	 	$.extend( requestParams, formatParams(jyjlList,"jyjl") );
	 	$.extend( requestParams, formatParams(gzjlList,"gzjl") );
	 	$.extend( requestParams, formatParams(zcprList,"zcpr") );
	 	$.extend( requestParams, formatParams(zgzsList,"zgzs") );
    	$.post(_url, requestParams,function(data){
 	        if(data.code == 0){
 	        	layer.closeAll();
 	        	var curPage = $(".layui-laypage-next").attr("data-page") - 1;
 	        	tableReload($,"#frm",table,curPage);
 	        }
 	        layer.msg(data.msg == "" ? _title +"成功！" : data.msg);
    	});
    	return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
	});
  	$("#editPageBtnId").click();
}

关于提交表单可以参考 layui+jfinal实现表格编辑功能。后台批量接受请求参数。

PS：

tableId对应html中table元素的id。上面的例子即是：listTableJtcy

tableCacheId对应的是table.render({elem: '#listTableJtcy', id: 'listTableIdJtcy'}}。上面例子即是：listTableIdJtcy

同样的方法可以扩展开关控件，日期控件等单元格编辑器。只需要扩展updateCacheOrForm方法就好了。