前言：
在layui开发中 在表格中的每一行记录单元格里展现下拉框和单选框，间接从表格上对数据进行更新。省的再弹窗来对数据进行批改，那么如何实现呢？？
首先确定表格的dom构造：
<div class="tableTab_box" style="padding: 0px 10px"> <div class="layui-form"> <table id="tList" lay-even lay-skin="nob" class="layui-table"></table> </div> </div>而后在表格下方退出layui独有的数据行模版块、d就是以后行的数据
咱们须要在每一行的单元格中应用radio、checkbox（layui开关）
因为每一行记录的input的职责是针对它本人所在行的进行数据操作，所以就须要利用agentId为每行记录中的input进行惟一标识，从而实现通过监听组件的变动并获取对应的agentId进行相应数据的批改。
其次因为多条记录中多个input的name不能雷同起因，所以须要加上name="extension-{{d.agentId}}"让name都是惟一的
<script type="text/html" id="extensionTpl"> <input type="radio" name="extension-{{d.agentId}}" data-agentid="{{d.agentId}}" value="1" title="1级" lay-filter="extension" {{ d.extension == "1" ? 'checked' : ''}}> <input type="radio" name="extension-{{d.agentId}}" data-agentid="{{d.agentId}}" value="2" title="2级" lay-filter="extension" {{ d.extension == "2" ? 'checked' : ''}}> <input type="radio" name="extension-{{d.agentId}}" data-agentid="{{d.agentId}}" value="3" title="3级" lay-filter="extension" {{ d.extension == "3" ? 'checked' : ''}}> </script>接下来是开关的，逻辑也是根本一样
<script type="text/html" id="onlineTpl"> <div> <input type="checkbox" name="online-{{d.agentId}}" data-agentid="{{d.agentId}}" lay-skin="switch" lay-text="在线|离线" lay-filter="online" {{ d.online == 1 ? 'checked' : ''}}> </div> </script>最终所有的html构造如下
<div class="tableTab_box" style="padding: 0px 10px"> <div class="layui-form"> <table id="tList" lay-even lay-skin="nob" class="layui-table"></table> </div> <script type="text/html" id="extensionTpl"> <input type="radio" name="extension-{{d.agentId}}" data-agentid="{{d.agentId}}" value="1" title="1级" lay-filter="extension" {{ d.extension == "1" ? 'checked' : ''}}> <input type="radio" name="extension-{{d.agentId}}" data-agentid="{{d.agentId}}" value="2" title="2级" lay-filter="extension" {{ d.extension == "2" ? 'checked' : ''}}> <input type="radio" name="extension-{{d.agentId}}" data-agentid="{{d.agentId}}" value="3" title="3级" lay-filter="extension" {{ d.extension == "3" ? 'checked' : ''}}> </script> <script type="text/html" id="onlineTpl"> <div> <input type="checkbox" name="online-{{d.agentId}}" data-agentid="{{d.agentId}}" lay-skin="switch" lay-text="在线|离线" lay-filter="online" {{ d.online == 1 ? 'checked' : ''}}> </div> </script></div> 上面来看js逻辑：
首先是定义表格数据的初始化。这里就是惯例的表格数据定义 。值得注意的是表格渲染实现(done)中对单元格有一个解决，避免渲染后的单元格挡住下拉选项。
$(".layui-table-body, .layui-table-box, .layui-table-cell").css( "overflow", "visible" );//避免单元格挡住下拉框 form.render(); table.render({ elem: "#tList", url: "getTable/xxx", page: true, method: "post", request: { pageName: "page", //页码的参数名称，默认：page limitName: "pageCount", //每页数据量的参数名，默认：lim }, skin: "line", cols: [ [ { title: "No.", type: "numbers", fixed: "left", width: 50, }, { field: "agentId", title: "字段11", }, { field: "extension", title: "优先级", templet: "#extensionTpl", align: "center", }, { field: "online", title: "状态", templet: "#onlineTpl", align: "center", }, { field: "curUser", title: "人员", align: "center", templet: getCurListData, }, ], ], dataType: "json", contentType: "application/json", data: { page: 0, pageCount: 0, }, done: function () { $(".layui-table-body, .layui-table-box, .layui-table-cell").css( "overflow", "visible" );//避免单元格挡住下拉框 form.render(); }, parseData: function (res) { var count = res.data && res.data.total ? res.data.total : 0; var dataList = res.data && res.data.list ? res.data.list : []; return { code: res.code, //接口状态 msg: res.description, //提醒文本 count: count, //总数据长度 data: dataList, //列表 }; }, }); //获取以后记录人员 getCurListData(function(){ //避免表格渲染实现后下拉框数据没更新 getSeatManageList(); form.render("select"); }); 接下来是一开始定义在表格行中的几个控件事件监听：
间接通过监听组件上定义的lay-filter （extension、online），而后在回调函数中获取到对应定义在元素上的h5属性data值。留神这个回调参数的obj和jq的$（this）有些区别
updateAgent函数就是依据以后行的id和值进行ajax申请后端对数据进行更新
//监听操作 form.on("radio(extension)", function (obj) { console.log(this); updateAgent({ id: $(this).data("agentid"), extension: this.value, }); }); //监听 form.on("switch(online)", function (obj) { updateAgent({ id: $(this).data("agentid"), online: obj.elem.checked ? 1 : 0, }); }); //监听 form.on("select(curUser)", function (obj) { if ( obj.elem.value == "" || $(obj.elem).data("value") == obj.elem.value ) {//这里做了一个小优化。当两次操作的值没还是一样的话就不进行申请 return; } updateAgent({ id: $(obj.elem).data("agentid"), curUser: obj.elem.value, }); $(obj.elem).data("value", obj.elem.value); }); //监听下拉扭转 form.on("select(agentName)", function (obj) { if ( obj.elem.value == "" || $(obj.elem).data("value") == obj.elem.value ) {//当值没扭转则不申请 return; } updateCallLog([ { id: $(obj.elem).data("id"), agentName: obj.elem.value, }, ]); $(obj.elem).data("value", obj.elem.value); }); //监听表格编辑事件 table.on("edit(callRecordsList)", function (obj) { var value = obj.value; //失去批改后的值 updateCallLog([ { id: obj.data.id, remarks: value, }, ]); }); 所有js代码
window.getSeatManageList = function () { tableRender({ elem: "#seatList", url: "getTable/xxx", page: true, method: "post", request: { pageName: "page", //页码的参数名称，默认：page limitName: "pageCount", //每页数据量的参数名，默认：lim }, skin: "line", cols: [ [ { title: "No.", type: "numbers", fixed: "left", width: 50, }, { field: "agentId", title: "字段11", }, { field: "extension", title: "优先级", templet: "#extensionTpl", align: "center", }, { field: "online", title: "状态", templet: "#onlineTpl", align: "center", }, { field: "curUser", title: "以后人员", align: "center", templet: renderCurSeatListSelect, }, ], ], dataType: "json", contentType: "application/json", data: { page: 0, pageCount: 0, }, done: function () { $(".layui-table-body, .layui-table-box, .layui-table-cell").css( "overflow", "visible" );//避免单元格挡住下拉框 form.render(); }, parseData: function (res) { var count = res.data && res.data.total ? res.data.total : 0; var dataList = res.data && res.data.list ? res.data.list : []; return { code: res.code, //接口状态 msg: res.description, //提醒文本 count: count, //总数据长度 data: dataList, //列表 }; }, }); } //监听操作 form.on("radio(extension)", function (obj) { console.log(this); updateAgent({ id: $(this).data("agentid"), extension: this.value, }); }); //监听 form.on("switch(online)", function (obj) { updateAgent({ id: $(this).data("agentid"), online: obj.elem.checked ? 1 : 0, }); }); //监听 form.on("select(curUser)", function (obj) { if ( obj.elem.value == "" || $(obj.elem).data("value") == obj.elem.value ) { return; } updateAgent({ id: $(obj.elem).data("agentid"), curUser: obj.elem.value, }); $(obj.elem).data("value", obj.elem.value); }); //监听下拉扭转 form.on("select(agentName)", function (obj) { if ( obj.elem.value == "" || $(obj.elem).data("value") == obj.elem.value ) {//当值没扭转则不申请 return; } updateCallLog([ { id: $(obj.elem).data("id"), agentName: obj.elem.value, }, ]); $(obj.elem).data("value", obj.elem.value); }); //监听表格编辑事件 table.on("edit(callRecordsList)", function (obj) { var value = obj.value; //失去批改后的值 updateCallLog([ { id: obj.data.id, remarks: value, }, ]); }); //获取以后记录人员 getCurListData(function(){ //避免表格渲染实现后下拉框数据没更新 getSeatManageList(); form.render("select"); });