实现穿梭框功能

开发工具与关键技术：Visual Studio 2015，C# 
作者：谢天林 
撰写时间：2019年07月25日

第一点：主要的内容

第二点：功能点的代码流程：

1. CSS样式可以自己随意设计，主要是创建两个盒子并用layui插件把两个表格渲染在两个盒子里面，再创建四个按钮就完成了准备工作。
   （上图去掉表头可以设置全局样式 thead{display:none;}）

2.控制器方法：

       //已认领交接箱查询(写在控制器渲染表格方法里面)
            foreach (var item in dbMyTure)//dbMyTure为linq查询的名称
            {//渲染表格拼接字段方法，渲染表格使用(效果看上图↑↑↑)
            var data = item.数据库字段1.Trim() + "--" 
            + item. 数据库字段2.Trim() + "--啦啦啦";//自己随便拼接的字段
            item.TrueBOX = Convert.ToString(data); 
             }

        //未认领交接箱查询(写在控制器渲染表格方法里面)
             foreach (var item in dbMyFalse) // dbMyFalse为linq查询的名称
             {//渲染表格拼接字段方法，渲染表格使用(效果看上图↑↑↑)
             var data = item.数据库字段1.Trim() + "--" 
             + 数据库字段2.Trim() + "--呀呀呀";//自己随便拼接的字段
             item.TrueBOX = Convert.ToString(data);
              }
                
        //删除认领操作
        public ActionResult UpData(int ConnectBoxID)
        {
            var msg = "";//声明变量
            S_ConnectBox dbTheOne = (from tbConnectBox in myModel.S_ConnectBox
                                     where tbConnectBox.ConnectBoxID == ConnectBoxID
                                     select tbConnectBox).Single();//查询状态值 
                                     
            dbTheOne.ConnectBoxState = false;
            myModel.Entry(dbTheOne).State = EntityState.Modified;//修改状态值
            if (myModel.SaveChanges() > 0) {msg = "Yes";}
             else{msg = "No";}
             
             return Json(msg, JsonRequestBehavior.AllowGet);}

        //添加认领操作
        public ActionResult AddData(int ConnectBoxID)
        {
             var msg = "";
            S_ConnectBox dbTheOne = (from tbConnectBox in myModel.S_ConnectBox
                                     where tbConnectBox.ConnectBoxID == ConnectBoxID
                                     select tbConnectBox).Single();//查询状态值
                                     
            dbTheOne.ConnectBoxState = true;
            myModel.Entry(dbTheOne).State = EntityState.Modified; //修改状态值
            if (myModel.SaveChanges() > 0) {msg = "Yes";}
            else{msg = "No";}
            
            return Json(msg, JsonRequestBehavior.AllowGet); }

3.JS代码：（CSS四个按钮分别对应下面四个方法）

//删除认领
        function THEONE1() {
            var data = layuiTable.cache.tabYesBoxTable;//获取表格数据
            var datalong = data.length; //获取数据长度
            for (var i = 0; i < datalong; i++) {
                var DFID = data[i].ConnectBoxID;
                var DFbool = data[i].LAY_CHECKED;//获取选中值
                if (DFbool) {
                    $.post("UpData", {
                        ConnectBoxID: DFID,
                    }, function (msg) {
                        if (msg == "Yes") {
                            layer.alert("删除认领成功！", { icon: 1, title: "提示" });
                            TabYesBoxTable.reload();//已认领交接箱表刷新
                            TabNoBoxTable.reload(); //未认领交接箱表刷新
                        } else {
                            layer.alert("删除认领失败！", { icon: 0, title: "提示" });}
                    }, "json")
                }
            }
        }

        //添加认领
        function THEONE2() {
            var data = layuiTable.cache.tabNoBoxTable; //获取表格数据
            var datalong = data.length; //获取数据长度
            for (var i = 0; i < datalong; i++) {
                var DFID = data[i].ConnectBoxID;
                var DFbool = data[i].LAY_CHECKED; //获取选中值
                if (DFbool) {
                    $.post("AddData", {
                        ConnectBoxID: DFID,
                    }, function (msg) {
                        if (msg == "Yes") {
                            layer.alert("添加认领成功！", { icon: 1, title: "提示" });
                            TabYesBoxTable.reload();//已认领交接箱表刷新
                            TabNoBoxTable.reload();//未认领交接箱表刷新
                        } else {
                            layer.alert("添加认领失败！", { icon: 0, title: "提示" });
                        }
                    }, "json")
                }
            }
        }

        //全部删除
        function THEALL1() {
            layer.confirm("确定要全部删除认领吗?",{ icon: 3,title:"提示"},function (){
                var data = layuiTable.cache.tabYesBoxTable; //获取表格数据
                var datalong = data.length; //获取数据长度
                if (datalong != 0) {
                    for (var i = 0; i < datalong; i++) {
                        var DFID = data[i].ConnectBoxID;
                        var DFbool = data[i].LAY_CHECKED;//获取选中值
                        $.post("UpData", {
                            ConnectBoxID: DFID
                        }, function () {
                            TabYesBoxTable.reload();//已认领交接箱表刷新
                            TabNoBoxTable.reload();//未认领交接箱表刷新
                        }, "json")
                    }
                    layer.alert("全部删除认领完成", { icon: 1, title: "提示" });
                } else {
                    layer.alert("数据为空!", { icon: 0, title: "提示" });
                }
            })
        }

        //全部添加
        function THEALL2() {
            layer.confirm("确定要全部添加认领吗?",{ icon: 3,title:"提示"},function () {
                var data = layuiTable.cache.tabNoBoxTable; //获取表格数据
                var datalong = data.length; //获取数据长度
                if (datalong != 0) {
                    for (var i = 0; i < datalong; i++) {
                        var DFID = data[i].ConnectBoxID;
                        var DFbool = data[i].LAY_CHECKED; //获取选中值
                        $.post("AddData", {
                            ConnectBoxID: DFID,
                        }, function () {
                            TabYesBoxTable.reload();//已认领交接箱表刷新
                            TabNoBoxTable.reload();//未认领交接箱表刷新
                        }, "json")
                    }
                    layer.alert("全部添加认领完成", { icon: 1, title: "提示" });
                } else {
                    layer.alert("数据为空!", { icon: 0, title: "提示" });
                }
            })
        }

第三点：总结
其实实现功能不是一定要用插件，可以用自己的思维想法来实现效果，这也是一个学习的过程，可以加深自己对代码的理解并更好地运用。

这个功能主要思维是先渲染表格，再点击表格数据执行修改操作，最后重新渲染。

如有错漏，感谢纠正！