前言:
在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");
});