效果如图所示:
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;
};
});