【教程】layui数据表格添加下拉菜单

效果如图所示：

css部分

.layui-table-cell, .layui-table-box, .layui-table-body {
	overflow: visible;
}
/* 设置下拉框的高度与表格单元格的高度相同 */
td .layui-form-select {
	margin-top: -10px;
	margin-left: -15px;
	margin-right: -15px;
}

html部分

<script type="text/html" id="toolbar1">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="savedata">保存</button>
    </div>
</script>
<table class="layui-table" id="tclass" lay-filter="tclass"></table>
<script id="tpl1" type="text/html">
	<select name="tvalue" lay-filter="select1">
		<option value="1">1</option>
		<option value="2">2</option>
		<option value="3">3</option>
		<option value="4">4</option>
		<option value="5" selected="selected">5</option>
	</select>
</script>

js部分

table.render({
elem: '#tclass'
,url: 'ajax/getClassesbygrade.php'
,where: {"grade":data.grade}
,defaultToolbar: []
,toolbar: '#toolbar1'
,cols: [[
	// {type: 'checkbox', fixed: 'left', LAY_CHECKED:true, hide:true},
{field:'classname', title: '班级', width:80},
  {field:'headteacher', title: '班主任', width:80},
  {field:'department', title: '专业部', width:100},
  {title: '分值', templet:'#tpl1',width:60}
]]
,id: 'tclassReload'
,done: function(){
	var elem = $(data.elem);
	var trElem = elem.parents('tr');
	//tclassReload为table.render中设置的id，不是<table>标签中的id
	var tableData = table.cache.tclassReload;
	
	$.each(tableData, function(index, item){
		tableData[index]["tvalue"] = 5;
	});
	// console.log(tableData);
	// 监听修改update到表格中
	form.on('select(select1)', function (data) {
		// console.log(data.value);
		// debugger;
		var elem = $(data.elem);
		var trElem = elem.parents('tr');
		var tableData = table.cache.tclassReload;
		// console.log(tableData);
		// 更新到表格的缓存数据中，才能在获得选中行等等其他的方法中得到更新之后的值
		tableData[trElem.data('index')][elem.attr('name')] = data.value;
		// console.log(tableData);
		// 其他的操作看需求 TODO
	});
}
});

//头工具栏事件
table.on('toolbar(tclass)', function(obj){
var checkStatus = table.checkStatus(obj.config.id);
switch(obj.event){
  case 'savedata':			
	var tableData = table.cache.tclassReload;
	// console.log(tableData);
	// layer.alert(JSON.stringify(tableData));
	$.ajax({
		url: 'ajax/quans3update.php',
		dataType: 'json',
		type: 'POST',	
		data: {"data":tableData, "updatetime":$('#tupdatetime').val(), "vercode":vercode},
		success: function (res) {	
			// console.log(res.data);
			if(res=="1"){
				layer.msg("保存成功");
			}
			else{
				layer.alert("保存失败,请重新尝试");
			}
			
		}
	});  
  break;
  
};
});