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