实现的功能
需要实现的功能:左侧选中或取消时,右侧做出相应的反应。同理,右侧取消的时候,如果表格当前页存在该数据时,需要变为未选中
使用的插件: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);
                                }
                            }
                        }
                    });
                });
Logo

前往低代码交流专区

更多推荐