共计 6268 个字符，预计需要花费 16 分钟才能阅读完成。
前言：
在 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");
}); 正文完