ng-grid双选盒子

/**
 * Created by PF0PQ348 on 2017/7/17.
 */
app.controller('ocodeRuleCtrl', ['$rootScope', '$scope', '$modal', '$http', 'httpJesen', function ($rootScope, $scope, $modal, $http, httpJesen) {
    //INIT
    $scope.monitorItem = {};
    $scope.monitorItem.inspectionNo = 1;
    $scope.pageSizes = [5, 10, 15, 20];
    $scope.pageSize = 10;

    $scope.currentPage = 1;

    // 初始化弹出框信息
    var msgInfo;
    //表单字段对象
    $scope.item = {};
    //全选
    var selected = false;
    $scope.selectAll = function () {
        selected = !selected;
        angular.forEach($scope.datas, function (item) {
            item.selected = selected;
        });
    };
    // 操作时的弹出框
    $scope.open = function () {
        var modalInstance = $modal.open({
            templateUrl: '../tpl/modal.html',
            controller: 'Notice',
            scope: $scope,
            size: 'sm',
            backdrop: 'static',
            resolve: {
                msg: function () {
                    return msgInfo;
                }
            }
        });
    };
    /* 数据表格函数 */
    $scope.query = function (pageSize, currentPage) {
        var find = angular.toJson({'pageSize': pageSize, 'pageNo': currentPage});
        httpJesen.formPost('barCodeRule/queryBarCodeRuleList', find, function (data) {
            var message = data.responseMsg;
            if (data.responseCode == 1) {
                console.log(data);
                $scope.datas = data.responseData.BarCodeRuleList;
                $scope.totalItems = data.responseData.page.totalCount;
                console.log($scope.datas);
                console.log($scope.totalItems);
                $scope.numPages = Math.ceil($scope.totalItems / pageSize);
            } else {
                msgInfo = {title: "提示", msg: message, pbtn: "确认", pshow: true, nbtn: "取消", nshow: true};
                $scope.open();
            }
        });
    };
    //根据分页查询数据
    $scope.query($scope.pageSize, $scope.currentPage);
    //新增二维码规则
    $scope.addQcode = function () {
        var modalInstance = $modal.open({
            templateUrl: 'addOcode.html',
            controller: "addQcodeController",
            size: 'lg',
            scope: $scope,
            backdrop: 'static',
            resolve: {
                items: function () {
                    $scope.items = {
                        type: "add"
                    };
                    return $scope.items;
                }

            }
        });
    };
    //删除
    $scope.delQrcode = function (thisdata) {
        $scope.detailId = thisdata.data.ruleId;
        console.log($scope.detailId);
        $rootScope.modalFun("确认要删除吗?", 'Notice', "sm", function () {
            httpJesen.singlePost('barCodeRule/delete', 'detailId=' + $scope.detailId, function (data) {
                var message = data.responseMsg;
                if (data.responseCode == 1) {
                    console.log(data.responseData);
                    msgInfo = {title: "提示", msg: "删除成功", pbtn: "确认", pshow: true, nbtn: "取消", nshow: true};
                    $scope.open();
                } else {
                    msgInfo = {title: "提示", msg: message, pbtn: "确认", pshow: true, nbtn: "取消", nshow: true};
                    $scope.open();
                }
                $scope.query($scope.pageSize, $scope.currentPage);
            });
        })
    };
    //编辑
    $scope.editQcode = function (thisdata) {
        $scope.detailId = thisdata.data.ruleId;
        console.log($scope.detailId);
        var modalInstance = $modal.open({
            templateUrl: 'addOcode.html',
            controller: "addQcodeController",
            size: 'lg',
            scope: $scope,
            backdrop: 'static',
            resolve: {
                items: function () {
                    $scope.items = {
                        type: "edit",
                        detailId: $scope.detailId
                    };
                    return $scope.items;
                }
            }
        });
    };
}]);
//增加组织弹框控制层
app.controller('addQcodeController', ['$rootScope', '$scope', '$modal', '$http', 'httpJesen', '$modalInstance', 'items', function ($rootScope, $scope, $modal, $http, httpJesen, $modalInstance, items) {
    console.log(items);
    $scope.items = items;
    console.log($scope.items);
    var msgInfo;
    $scope.open = function () {
        var modalInstance = $modal.open({
            templateUrl: '../tpl/modal.html',
            controller: 'Notice',
            size: 'sm',
            backdrop: 'static',
            resolve: {
                msg: function () {
                    return msgInfo;
                }
            }
        });
    };
    $scope.totalServerItems = 0;
    $scope.pagingOptions = {
        pageSizes: [10, 15, 20, 30],
        pageSize: 10,
        currentPage: 1
    };
    $scope.setPagingData = function (data) {
        var pagedData = data;
        $scope.dateSource = pagedData;
        console.log($scope.totalServerItems);
        if (!$scope.$$phase) {
            $scope.$apply();
        }
    };
    $scope.getPagedDataAsync = function (pageSize, page) {
        console.log(pageSize + '+' + page);
        setTimeout(function () {
            var find = angular.toJson({'pageSize': pageSize, 'pageNo': page});
            httpJesen.formPost('barCodeChild/queryBarCodeChildList', find, function (data) {
                var message = data.responseMsg;
                if (data.responseCode == 1) {
                    console.log(data);
                    $scope.totalServerItems = data.responseData.page.totalCount;
                    $scope.setPagingData(data.responseData.BarCodeChildList);
                } else {
                    msgInfo = {title: "提示", msg: message, pbtn: "确认", pshow: true, nbtn: "取消", nshow: true};
                    $scope.open();
                }
            });
        }, 100);
    };

    $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage);

    $scope.$watch('pagingOptions', function (newVal, oldVal) {
        console.log(newVal);
        if (newVal !== oldVal || newVal.currentPage !== oldVal.currentPage) {
            $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage);
        }
    }, true);

    $scope.selectedItem = [];
    $scope.submitItem = [];
    $scope.getruleChildType = function(a){
        if(a=="1"){
            return "固定码";
        }else if(a=="2"){
            return "日期";
        }else if(a=="3"){
            return "顺序单号";
        }else if(a=="4"){
            return "序列号";
        }else if(a=="5"){
            return "规格码";
        }else if(a=="6"){
            return "原材料名称";
        }else if(a=="7"){
            return "炉号";
        }else if(a=="8"){
            return "设备号";
        }else if(a=="9"){
            return "配方";
        }else if(a=="10"){
            return "产地";
        }else if(a=="11"){
            return "厂家";
        }

    };
    $scope.getformatType = function(b){
        if(b=="0"){
            return "yyyyMMdd"
        }else if(b=="1"){
            return "yyyyMM"
        }else if(b=="2"){
            return "yyyyMM(字母)"
        }else if(b=="3"){
            return "数字"
        }else if(b=="4"){
            return "字母"
        }else if(b=="5"){
            return "数字字母组合"
        }
    };
    $scope.myDefs = [
        {field: 'ruleChildId', displayName: 'ID'},
        {
            field: 'ruleChildType',
            displayName: '规则类型',
            cellTemplate: "<div class='ngCellText' >{{getruleChildType(row.entity.ruleChildType)}}</div>"
        },
        {
            field: 'formatType',
            displayName: '格式',
            cellTemplate: "<div class='ngCellText' >{{getformatType(row.entity.formatType)}}</div>"
        },
        {field: 'digitsNum', displayName: '位数'},
        {field: 'fixedCharacter', displayName: '固定字符'}
    ];
    $scope.ngGridLeft = {
        i18n: 'zh-cn',
        checkboxHeaderTemplate: '<input class="ngSelectionHeader" type="checkbox" ng-model="allSelected" ng-change="toggleSelectAll(allSelected)"/>',
        checkboxCellTemplate: '<div class="ngSelectionCell"><input tabindex="-1" class="ngSelectionCheckbox" type="checkbox" ng-checked="row.selected" /></div>',
        data: 'dateSource',
        columnDefs: $scope.myDefs,
        enablePaging: true,
        showFooter: true,
        totalServerItems: 'totalServerItems',
        pagingOptions: $scope.pagingOptions,
        multiSelect: false,
        selectedItems: $scope.selectedItem,//选择某行这一行的对象就赋值给$scope.selectedItem
        multiSelect: true,//不可多选
        showSelectionCheckbox: true//每行显示checkbox
    };
    $scope.ngGridRight = {
        i18n: 'zh-cn',
        checkboxCellTemplate: '<div class="ngSelectionCell"><input tabindex="-1" class="ngSelectionCheckbox" type="checkbox" ng-checked="row.selected" /></div>',
        data: 'rightData',
        columnDefs: $scope.myDefs,
        enablePaging: true,
        showFooter: false,
        totalServerItems: 'totalServerItems',
        multiSelect: false,
        selectedItems: $scope.submitItem,//选择某行这一行的对象就赋值给$scope.selectedItem
        enableRowReordering: true,
        enableSorting: false,
        showSelectionCheckbox: true//每行显示checkbox
    };


    //上移
    $scope.up = function () {
        console.log($scope.submitItem);
        if ($scope.submitItem.length == 0) {
            msgInfo = {title: "提示", msg: "请选择选择一条规则!", pbtn: "确认", pshow: true, nbtn: "取消", nshow: false};
            $scope.open();
            return;
        } else if ($scope.submitItem.length == 1) {
            console.log($scope.submitItem[0].index);
            var tmpStr = JSON.stringify($scope.rightData);
            var tmpArray = JSON.parse(tmpStr);
            var selectIndex = $scope.submitItem[0].index;
            if (selectIndex <= 0) {
                return;
            } else {
                var tmp = tmpArray[selectIndex];
                tmpArray[selectIndex] = tmpArray[selectIndex - 1];
                tmpArray[selectIndex - 1] = tmp;
                $scope.rightData = tmpArray;
                $scope.rightData.forEach(function (item, i) {
                    item.index = i;
                });
                //监听选中行
                $scope.$on('ngGridEventData', function () {
                    $scope.ngGridRight.selectRow(selectIndex, true);
                });
                selectIndex = --selectIndex;
                console.log($scope.rightData);
            }
        }

    };
    //下移
    $scope.down = function () {
        console.log($scope.submitItem);
        console.log("下移");
        if ($scope.submitItem.length == 0) {
            msgInfo = {title: "提示", msg: "请选择选择一条规则!", pbtn: "确认", pshow: true, nbtn: "取消", nshow: false};
            $scope.open();
            return;
        } else if ($scope.submitItem.length == 1) {
            console.log($scope.submitItem[0].index);
            var tmpStr = JSON.stringify($scope.rightData);
            var tmpArray = JSON.parse(tmpStr);
            var selectIndex = $scope.submitItem[0].index;
            if (selectIndex >= $scope.rightData.length - 1) {
                return;
            } else {
                var tmp = tmpArray[selectIndex + 1];
                tmpArray[selectIndex + 1] = tmpArray[selectIndex];
                tmpArray[selectIndex] = tmp;
                $scope.rightData = tmpArray;
                $scope.rightData.forEach(function (item, i) {
                    item.index = i;
                });
                //监听选中行
                $scope.$on('ngGridEventData', function () {
                    $scope.ngGridRight.selectRow(selectIndex, true);
                });
                selectIndex = ++selectIndex;
                console.log($scope.rightData);
            }
        }
    };
    //删除
    $scope.del = function () {
        console.log("删除");
        console.log($scope.submitItem);
        if ($scope.submitItem.length == 0) {
            msgInfo = {title: "提示", msg: "请选择一条规则!", pbtn: "确认", pshow: true, nbtn: "取消", nshow: false};
            $scope.open();
            return;
        } else {
            $scope.rightData.forEach(function (item, i) {
                if (item == $scope.submitItem[0]) {
                    console.log(i);
                    $scope.rightData.splice(i, 1);
                    $scope.rightData.forEach(function (dataItem, j) {
                        dataItem.index = j;
                        //监听选中行
                        $scope.$on('ngGridEventData', function () {
                            $scope.ngGridRight.selectRow(j, false);
                        });
                    });
                }
                ;
            });
        }
    };
    //右移
    /*var midStr = '';
     var secondStr = '';*/
    $scope.rightMove = function () {
        var midStr = '';
        var secondStr = '';
        midStr = JSON.stringify($scope.rightData);
        if (midStr) {
            console.log(22);
            secondStr = JSON.stringify($scope.selectedItem);
            $scope.rightData = JSON.parse(midStr).concat(JSON.parse(secondStr));
            midStr = JSON.stringify($scope.rightData);
        } else {
            midStr = JSON.stringify($scope.selectedItem);
            $scope.rightData = JSON.parse(midStr);
        }
        $scope.rightData.forEach(function (item, i) {
            item.index = i;
        });
        console.log($scope.rightData);
    };
    if ($scope.items.type == "add") {
        $scope.item.ruleMessage = "";
        $scope.rightData = [];
        //保存提交
        $scope.ok = function () {
            //$modalInstance.close();
            console.log($scope.rightData);
            console.log($scope.item);
            //已选子规则id
            $scope.ruleChildIdArry = [];
            $scope.rightData.forEach(function (item, i) {
                if (item) {
                    console.log(item.ruleChildId);
                    $scope.ruleChildIdArry.push(item.ruleChildId);
                    console.log($scope.ruleChildIdArry)
                }
            });
            if($scope.rightData.length == 0){
                msgInfo = {title: "提示", msg: "已选规则不能为空!", pbtn: "确认", pshow: true, nbtn: "取消", nshow: false};
                $scope.open();
                return;
            }
            console.log($scope.ruleChildIdArry.join(","));
            $scope.item.ruleChildIdlist = $scope.ruleChildIdArry.join(",");
            var find = {
                "ruleName": $scope.item.ruleName,
                "ruleMessage": $scope.item.ruleMessage,
                'ruleChildIdlist': $scope.item.ruleChildIdlist
            };
            find = angular.toJson($rootScope.dealWithJson(find));
            httpJesen.formPost('barCodeRule/insert', find, function (data) {
                var message = data.responseMsg;
                console.log(message);
                if (data.responseCode == 1) {
                    console.log(data);
                    msgInfo = {title: "提示", msg: "保存成功", pbtn: "确认", pshow: true, nbtn: "取消", nshow: true};
                    $scope.open();
                    $scope.query($scope.pageSize, $scope.currentPage);
                    $modalInstance.close();
                } else {
                    msgInfo = {title: "提示", msg: message, pbtn: "确认", pshow: true, nbtn: "取消", nshow: true};
                    $scope.open();
                }
            });

        };

        $scope.cancel = function () {
            $modalInstance.dismiss('cancel');
        };
    } else if ($scope.items.type == "edit") {
        $scope.item = {};
        console.log("edit");
        console.log($scope.items.detailId);
        $scope.getDetial = function () {
            httpJesen.singlePost('barCodeRule/queryById', 'detailId=' + $scope.detailId, function (data) {
                var message = data.responseMsg;
                if (data.responseCode == 1) {
                    console.log(data);
                    data = data.responseData.BarCodeRule;
                    $scope.item = data;
                }
            })
        };
        $scope.getDetial();
        //已选子规则
        $scope.alistDetial = function () {
            httpJesen.singlePost('barCodeChild/aCBarCodeChildList', 'detailId=' + $scope.items.detailId, function (data) {
                var message = data.responseMsg;
                if (data.responseCode == 1) {
                    console.log(data);
                    data = data.responseData.BarCodeChildList;
                    $scope.rightData = data;
                }
            })
        };
        $scope.alistDetial();
        console.log($scope.rightData);
        //提交保存
        $scope.ok = function () {
            console.log($scope.rightData);
            //已选子规则id
            $scope.ruleChildIdArry = [];
            $scope.rightData.forEach(function (item, i) {
                if (item) {
                    console.log(item.ruleChildId);
                    $scope.ruleChildIdArry.push(item.ruleChildId);
                    console.log($scope.ruleChildIdArry)
                }
            });
            if($scope.rightData.length == 0){
                msgInfo = {title: "提示", msg: "已选规则不能为空!", pbtn: "确认", pshow: true, nbtn: "取消", nshow: false};
                $scope.open();
                return;
            }
            console.log($scope.ruleChildIdArry.join(","));
            $scope.item.ruleChildIdlist = $scope.ruleChildIdArry.join(",");
            var find = {
                'ruleId': $scope.items.detailId,
                'ruleMessage': $scope.item.ruleMessage,
                'ruleName': $scope.item.ruleName,
                'ruleChildIdlist': $scope.item.ruleChildIdlist
            };
            find = angular.toJson($rootScope.dealWithJson(find));
            httpJesen.formPost('barCodeRule/update', find, function (data) {
                var message = data.responseMsg;
                console.log(message);
                if (data.responseCode == 1) {
                    console.log(data);
                    msgInfo = {title: "提示", msg: "修改成功", pbtn: "确认", pshow: true, nbtn: "取消", nshow: true};
                    $scope.open();
                    $modalInstance.close();
                    $scope.query($scope.pageSize, $scope.currentPage);
                } else {
                    msgInfo = {title: "提示", msg: message, pbtn: "确认", pshow: true, nbtn: "取消", nshow: true};
                    $scope.open();
                }
            });
            $modalInstance.close();
        };
    }
    //取消
    $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
    };

}]);
// 弹框控制层
// Notice modal
app.controller('Notice', ['$rootScope', '$scope', '$modalInstance', 'msg', function ($rootScope, $scope, $modalInstance, msg) {
    $scope.msg = msg;
    $scope.ok = function () {
        $modalInstance.close();
    };

    $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
    };
}]);