Layui数据表格复选框取消选中
需要实现的功能:左侧选中或取消时,右侧做出相应的反应。同理,右侧取消的时候,如果表格当前页存在该数据时,需要变为未选中使用的插件:Layui、Vue主要出现的问题:右侧取消的时候,表格中相应的行没有变为未选中,但全选的checkbox却变成了未选中右侧的显示<div class="layui-card"id="vue_conten">&l...
·
需要实现的功能:左侧选中或取消时,右侧做出相应的反应。同理,右侧取消的时候,如果表格当前页存在该数据时,需要变为未选中
使用的插件:Layui、Vue
主要出现的问题:右侧取消的时候,表格中相应的行没有变为未选中,但全选的checkbox却变成了未选中
解决办法:执行一次对于行的点击事件,再修改该行checkbox的class,使得样式变为未选中
右侧的显示
<div class="layui-card" id="vue_conten">
<div class="layui-card-header">已选择人员列表</div>
<div class="layui-card-body">
<div class="layui-input-block" style="margin-left:0px;" id="divReceives">
<a v-for="item in SelManagerList" class="layui-btn layui-btn-primary layui-btn-xs">
{{item.UserName + "(" +item.Name+")"}}
<i class="layui-icon layui-icon-close-fill" style="font-size: 30px; color:#FF5722;" v-on:click="removeUser(item.Id)"></i>
</a>
</div>
</div>
</div>
vue = new Vue({
el: "#vue_content",
data: {
model: {
},
SelManagerList:@(Json.Serialize(ViewBag.SelID)).length>0? @(Json.Serialize(ViewBag.SelID)) : []
},
methods: {
removeUser: function (Id) {
var v = this;
var lodaFlag = 0;
for (var i = 0; i < thisPageData.length; i++) { //遍历表格当前页数据
if (Id == thisPageData[i].Id) {
//当右侧取消选择的时候,如果表格当前页存在该数据,需要执行该行checkbox的点击事件
$('#tableListUser').next().find("div.layui-table-body").find("tr[data-index='" + i + "'] div.layui-form-checked").click();
//点击事件执行后,只有全选按钮会取消选中,需要手动修改需要取消选中的行的class,也就是样式变为为选中
$('#tableListUser').next().find("div.layui-table-body").find("tr[data-index='" + i + "'] div.layui-form-checked").removeClass("layui-form-checked");
}
if (i == thisPageData.length - 1) {
lodaFlag = lodaFlag + 1;
} //表格当前页存在时,需要先把表格中的复选框取消选择
}
var t1 = window.setInterval(function () {
if (lodaFlag == 1) {//-------------请自行计算
window.clearInterval(t1); //去掉定时器
$.each(vue.SelManagerList, function (index, item) {
if (item.Id == Id) {
vue.SelManagerList.splice(index, 1);
}
});
return false;
}
}, 100);
}
}
});
var thisPageData=[]; //保存当前页数据
table.render({
//其它内容略...
parseData: function (res) { //res 即为原始返回的数据
if (res.code == 0 && res.count > 0) { //判断状态和是否有数据
//SelList = MergeArray(SelList, active["getCheckData"].call());
thisPageData = res.data;
for (var i = 0; i < res.data.length; i++) { //遍历该页数据
for (var j = 0; j < vue.SelManagerList.length; j++) {
if (vue.SelManagerList[j].Id == res.data[i].Id) { //如果之前有选中该数据
res.data[i].LAY_CHECKED = true //默认选中
}
}
}
}
},
});
//.监听选择,记录已选择项
table.on('checkbox(tableListUser)', function (obj) {
//.全选或单选数据集不一样
var data = obj.type == 'one' ? [obj.data] : thisPageData;
console.log(data);
//.遍历数据
$.each(data, function (k, v) {
//.假设你数据中 Id 是唯一关键字
if (obj.checked) { //判断是选择还是取消
//SelList.push({ Id: parseInt(v.Id), UserName: v.UserName, Name: v.Name });
vue.SelManagerList.push({ Id: parseInt(v.Id), UserName: v.UserName, Name: v.Name });
} else {
for (var j = 0; j < vue.SelManagerList.length; j++) {
if (vue.SelManagerList[j].Id == v.Id) { //当取消的Id和vue.SelManagerList中的Id相同时,删除vue.SelManagerList中的该条数据
vue.SelManagerList.splice(j, 1);
}
}
}
});
});
更多推荐
已为社区贡献1条内容
所有评论(0)