广告合作QQ：76874919

angularjs popup-table 弹出框表格指令

Angularjs 2020-02-23 
//表格处理
app.directive('popupTable',['$http','$rootScope','$cookies','$location',function ($http,$rootScope,$cookies,$location) {
    return {
        restrict: 'E',templateUrl: 'popuptable_templete.html',scope: {
            url: '=',routepath: '=?',routetype: '=?',onCallback: '&',mulitselect: '=',selectnode: '=?'
        },link: function ($scope,element,attrs) {
            $scope.myValue = false;
            $scope.checkallvalue = false;

            var primaryKeyFieldName = "";
            var codeFieldName = "";
            $scope.showAddButton = true;
            $scope.showRefreshButton = true;
            var checkList = new Array();

            //监视url变化。从而重新读取数据
            $scope.$watch('url',function (newVal,oldVal) {
                if (oldVal != newVal) {
                    //设定全选为false
                    $scope.checkallvalue = false;
                    querySearch(0,"");
                }
            });

            //选择所有
            $scope.checkall = function () {
                if (angular.isDefined($scope.popupdata) && $scope.popupdata.length > 0) {
                    angular.forEach($scope.popupdata,function (item,index) {
                        $scope.changeChoose($scope.checkallvalue,item);
                    });
                }
            }

            //选择改变时事件
            $scope.changeChoose = function (check,data) {
                var index = findSelected(data);
                if (check) {
                    if (index <= -1)
                        checkList.push(data);
                } else {
                    if (index > -1)
                        checkList.splice(index,1);
                }
            }

            //通过data数据在数组中查询,并返回所在的索引，没有找到则返回-1
            function findSelected(data) {
                var indexvalue = -1;
                if (angular.isUndefined(checkList) || checkList.length <= 0 || primaryKeyFieldName == "")
                    return indexvalue;
                angular.forEach(checkList,index) {
                    if (indexvalue == -1) {
                        if (item[primaryKeyFieldName] == data[primaryKeyFieldName]) {
                            indexvalue = index;
                        }
                    }
                });
                return indexvalue;
            }

            //判断是否选中
            $scope.isChecked = function (rowdata) {
                return findSelected(rowdata) > -1;
            }

            //1、读取网络数据，分页，搜索 
            function querySearch(index,searchText) {
                if ($scope.popupdata != null && $scope.popupdata.length > 0)
                    $scope.popupdata = null;
                //初始化
                var params = { "SearchKey": searchText,"UserId": $rootScope.loginUserId };
                params = angular.extend(params,{ "IsGetColumns": index > 0 ? false : true });

                //刷新或者查询的时候需要清空已选择项
                if (index > 0)
                    checkList.splice(0,checkList.length);

                $scope.loading = true;
                $(".no-data-div").hide();

                serverRequestwithformdata($http,$rootScope.SystemUrl + $scope.url + "/PopupList",$.param(params),function (data) {
                    console.info(data);
                    $scope.loading = false;
                    if (data.status == "ok") {
                        if (index <= 0) {
                            $scope.title = data.windowTitle;
                            $scope.columnlist = data.colums;
                            $scope.showAddButton = data.ShowAdd;
                            $scope.showRefreshButton = data.ShowRefresh;
                            primaryKeyFieldName = data.primayKey;
                            codeFieldName = data.codeField;
                            //url 变化导致执行=>处理已勾选项=>赋值勾选项。
                            if (checkList.length > 0)
                                checkList.splice(0,checkList.length);
                            if (angular.isDefined($scope.selectnode) && $scope.selectnode != null && $scope.selectnode.length > 0)
                                checkList = $scope.selectnode;
                        }
                        $scope.data = data.records;
                        var sum = data.records.length;
                        $(".sum").text("共" + sum + "条数据"); 
                        $scope.pages = Math.ceil(sum / $rootScope.PageSize);
                        $scope.newPages = $scope.pages > 5 ? 5 : $scope.pages;
                        $scope.pageList = [];
                        $scope.selPage = 1;
                        $scope.sumPage = Math.ceil($scope.data.length / $rootScope.PageSize);
                        for (var i = 0; i < $scope.newPages; i++) {
                            $scope.pageList.push(i + 1);
                        }
                        if (sum == 0) {
                            $(".no-data-div").show();
                            $(".no-data-span").val("无数据");
                        }
                        $scope.setData();
                        $(".pages").text("当前第" + $scope.selPage + "页" + "/" + "共" + $scope.sumPage + "页");
                    } else {
                        $(".no-data-div").show();
                        $(".no-data-span").val(data.message);
                    }
                },function (data) {
                    $scope.loading = false;
                    $(".no-data-div").show();
                    $(".no-data-span").val("访问错误");
                });
            }

            //设置表格数据源(分页)
            $scope.setData = function () {
                //通过当前页数筛选出表格当前显示数据
                $scope.popupdata = $scope.data.slice(($rootScope.PageSize * ($scope.selPage - 1)),($scope.selPage * $rootScope.PageSize));
                if (angular.isDefined($scope.popupdata) && $scope.popupdata.length > 0) {
                    var indexvalue = 0;
                    angular.forEach($scope.popupdata,index) {
                        if (findSelected(item) > -1)
                            indexvalue++;
                    });
                    $scope.checkallvalue = (indexvalue == $scope.popupdata.length);
                }
            }

            //打印当前选中页索引
            $scope.selectPage = function (page) {
                if (page < 1 || page > $scope.pages)
                    return;
                if (page > 2) {
                    var newpageList = [];
                    for (var i = (page - 3) ; i < ((page + 2) > $scope.pages ? $scope.pages : (page + 2)) ; i++) {
                        newpageList.push(i + 1);
                    }
                    $scope.pageList = newpageList;
                }
                $scope.selPage = page;
                $scope.setData();
                $scope.isActivePage(page);
                $(".pages").text("当前第" + page + "页" + "/" + "共" + $scope.sumPage + "页");
            };

            //跳转
            $scope.jump = function () {
                var page = parseInt($(".jump-bar").val());
                if ($(".jump-bar").val() == 0) {
                    swal("请输入@R_665_404@数","","error");
                    return;
                }
                //不能小于1大于最大
                if (page < 1 || page > $scope.pages) return;
                //最多显示分页数5
                if (page > 2) {
                    //因为只显示5个页数，大于2页开始分页转换
                    var newpageList = [];
                    for (var i = (page - 3) ; i < ((page + 2) > $scope.pages ? $scope.pages : (page + 2)) ; i++) {
                        newpageList.push(i + 1);
                    }
                    $scope.pageList = newpageList;
                }
                $scope.selPage = page;
                $scope.setData();
                $scope.isActivePage(page);
                $(".pages").text("当前第" + page + "页" + "/" + "共" + $scope.sumPage + "页");
            };

            //设置当前选中页样式
            $scope.isActivePage = function (page) {
                return $scope.selPage == page;
            };

            //上一页
            $scope.PrevIoUs = function () {
                $scope.selectPage($scope.selPage - 1);
            }

            //下一页
            $scope.Next = function () {
                $scope.selectPage($scope.selPage + 1);
            };

            //关闭弹出框
            function closewindow() {
                $(".pop-up").stop(true,false).fadeOut();
            }

            //取消弹出框
            $scope.PopupCancel = function () {
                closewindow();
            }

            //确定
            $scope.PopupOK = function () {
                if (primaryKeyFieldName == "" || codeFieldName == "") {
                    swal("当前未配置返回信息","error");
                    return;
                }
                //获取选中的数据,并关闭弹出，然后返回填值 
                if (angular.isUndefined(checkList) || checkList.length <= 0) {
                    swal("请勾选要操作的数据","error");
                    return;
                }
                var allowMulti = false;
                if (angular.isDefined($scope.mulitselect)) {
                    allowMulti = $scope.mulitselect;
                }
                var primaryKey = "";
                var codeKey = "";
                //只存在1个的情况
                if (checkList.length == 1) {
                    primaryKey = checkList[0][primaryKeyFieldName];
                    codeKey = checkList[0][codeFieldName];
                } else {
                    //存在多个
                    if (allowMulti == false) {
                        primaryKey = checkList[0][primaryKeyFieldName];
                        codeKey = checkList[0][codeFieldName];
                    } else {
                        angular.forEach(checkList,index) {
                            primaryKey += item[primaryKeyFieldName] + ",";
                            codeKey += item[codeFieldName] + ",";
                        });
                    }
                }
                if (primaryKey.endsWith(","))
                    primaryKey = primaryKey.substring(0,primaryKey.length - 1);
                if (codeKey.endsWith(","))
                    codeKey = codeKey.substring(0,codeKey.length - 1);
                closewindow();
                if ($scope.onCallback) {
                    $scope.onCallback({ data: checkList,primaryKey: primaryKey,codeKey: codeKey,url: $scope.url });
                }
            }

            //刷新
            $scope.PopupRefresh = function () {
                $("#searchText").val("");
                querySearch(1,"");
            }

            //新增
            $scope.PopupAdd = function () {
                $location.path('/' + $scope.routepath).search({ id: '-1',type: $scope.routetype });
            }

            //搜索
            $scope.PopupSearch = function () {
                querySearch(1,$("#searchText").val());
            }
        }
    };
}]);
模板的url 页面 
<script type="text/javascript">
    $(function () {
        //全选
        $(".Pagingjump-check").click(function () {
            if (this.checked) {
                $(this).parents().parents().parents(".tDefault").find(".table-checked").each(function () {
                    this.checked = true;
                })
            }
            if (!this.checked) {
                $(this).parents().parents().parents(".tDefault").find(".table-checked").each(function () {
                    this.checked = false;
                })
            }
        });
    })
</script>
<div class="pop-up-content">
    <div class="pop-up-table-title">{{title}}</div>
    <div class="pop-up-table-search">
        <input id="searchText" type="text" class="input-search" size="30" placeholder="请输入查询条件">
        <ul class="middleFree block-button-panel-ul pop-up-table-search-btn">
            <li ng-click="PopupSearch()">
                <a href="javascript:void(0)" title="查询" class="cBlue" style="padding: 5px 10px !important">
                    <span>查询</span>
                </a>
            </li>
        </ul>
    </div>
    <div>
        <div class="pop-up-table-panel" style="border-top: 1px solid #DFDFDF">
            <table class="tDefault pop-up-table search-block-process-table">
                <tr nf-if="columnlist.length>0" style="border-top:0px">
                    <td style="width:30px !important">
                        <input id="titleCheck-all" class="Pagingjump-check" name="checkRow" type="checkBox" ng-model="checkallvalue" ng-change="checkall()" >
                    </td>
                    <td class="table-width1" style="width:50px !important">序号</td>
                    <td ng-repeat="column in columnlist |orderBy:column.PopupColumnOrder" width="{{column.PopupDefaultWidth}}" ng-click="col='{{column.ColumnName}}';" ng-show="{{column.IsPopoupColumn}}">{{column.DisplayColumnName}}</td>
                </tr>
                <tr ng-repeat="data in popupdata">
                    <!--ng-checked-->
                    <td><input class="table-checked" name="checkRow" type="checkBox" ng-model="data.selected" ng-change="changeChoose(data.selected,data)" ng-checked="isChecked(data)"></td>
                    <td>{{ $index + 1 }}</td>
                    <td class="table-textalign-left" ng-repeat="column in columnlist|orderBy:column.PopupColumnOrder" ng-show="{{column.IsPopoupColumn}}" datacolumn="{{column.ColumnName}}">{{data[column.ColumnName]}}</td>
                </tr>
            </table>
            <div class="no-data-div">
                <span class="no-data-span">无数据</span>
            </div>
            <div class="loading-page" style="height:300px !important;" ng-if="loading">
                <div class='uil-default-css' style='transform: scale(0.2); width: 100% !important; height: 300px !important;'>
                    <div class="loadingpoint" style=' -webkit-transform:rotate(0deg) translate(0,-60px) ; transform:rotate(0deg) translate(0,-60px);'></div>
                    <div class="loadingpoint" style=' -webkit-transform: rotate(30deg) translate(0,-60px); transform: rotate(30deg) translate(0,-60px);'></div>
                    <div class="loadingpoint" style=' -webkit-transform: rotate(60deg) translate(0,-60px); transform: rotate(60deg) translate(0,-60px);'></div>
                    <div class="loadingpoint" style=' -webkit-transform: rotate(90deg) translate(0,-60px); transform: rotate(90deg) translate(0,-60px);'></div>
                    <div class="loadingpoint" style=' -webkit-transform: rotate(120deg) translate(0,-60px); transform: rotate(120deg) translate(0,-60px);'></div>
                    <div class="loadingpoint" style=' -webkit-transform: rotate(150deg) translate(0,-60px); transform: rotate(150deg) translate(0,-60px);'></div>
                    <div class="loadingpoint" style=' -webkit-transform: rotate(180deg) translate(0,-60px); transform: rotate(180deg) translate(0,-60px);'></div>
                    <div class="loadingpoint" style=' -webkit-transform: rotate(210deg) translate(0,-60px); transform: rotate(210deg) translate(0,-60px);'></div>
                    <div class="loadingpoint" style=' -webkit-transform: rotate(240deg) translate(0,-60px); transform: rotate(240deg) translate(0,-60px);'></div>
                    <div class="loadingpoint" style=' -webkit-transform: rotate(270deg) translate(0,-60px); transform: rotate(270deg) translate(0,-60px);'></div>
                    <div class="loadingpoint" style=' -webkit-transform: rotate(300deg) translate(0,-60px); transform: rotate(300deg) translate(0,-60px);'></div>
                    <div class="loadingpoint" style=' -webkit-transform: rotate(330deg) translate(0,-60px); transform: rotate(330deg) translate(0,-60px);'></div>
                </div>
            </div>
        </div>
        <div class="block-button-panel2">
            <div class="table-pagingjump-div" style="bottom: 0px;width: 100%;height: 35px;padding: 4px;">
                <div class="Pagingjump-function-panel" style="float:right;width:auto">
                    <nav>
                        <ul class="pagination Pagingjump-function-ul Pagingjump-table-ul">
                            <li>
                                <input type="text" style="padding: 2px 2px 3px 2px!important;width:40px" class="jump-bar" size="5" value="" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')" />
                            </li>
                            <li>
                                <a ng-click="jump()" class="table-pagination-a">
                                    <div class="fs1 iconb" data-icon=""></div>
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>
                <div class="Pagingjump-check-panel-table" style="float:right">
                    <span class="sum">共0条数据</span>
                    <span class="pages">当前第1页/共1页</span>
                </div>
                <div class="Pagingjump-function-panel" style="float:left">
                    <nav>
                        <ul class="pagination Pagingjump-function-ul Pagingjump-table-ul">
                            <li>
                                <a ng-click="PrevIoUs()" class="table-pagination-a">
                                    <div class="fs1 iconb" data-icon=""></div>
                                </a>
                            </li>
                            <li ng-repeat="page in pageList" ng-class="{active: isActivePage(page)}" class="table-pagination-a">
                                <a ng-click="selectPage(page)">{{ page }}</a>
                            </li>
                            <li>
                                <a ng-click="Next()" class="Pagingjump-function-nextpage table-pagination-a">
                                    <div class="fs1 iconb" data-icon=""></div>
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
        <div class="pop-up-button-panel">
            <div class="block-button-panel-left">
                <ul class="middleFree block-button-panel-ul">
                    <li ng-click="PopupAdd()" ng-if="showAddButton">
                        <a href="javascript:void(0)" title="新增" class="cBlue" style="padding: 5px 10px !important">
                            <span>新增</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="block-button-panel-right">
                <ul class="middleFree block-button-panel-ul">
                    <li ng-click="PopupRefresh()" ng-if="showRefreshButton">
                        <a href="javascript:void(0)" title="刷新" class="cBlue">
                            <span>刷新</span>
                        </a>
                    </li>
                    <li ng-click="PopupOK()">
                        <a href="javascript:void(0)" title="确定" class="cBlue">
                            <span>确定</span>
                        </a>
                    </li>
                    <li ng-click="PopupCancel()">
                        <a href="javascript:void(0)" title="取消" class="cRed">
                            <span>取消</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

调用：

//打开弹出框
        $scope.openpop = function (type) {
            $(".pop-up").stop(true,false).fadeIn();
            //根据绑定值进行读取操作
            if (type == "SearchHistory") {
                //请求数据即可.读取List接口

            } else {
                //读取PopupList接口               
                $scope.routetype = "ReturnPopup";
                if (type == "process")
                    $scope.routepath = "ProcessDetail";
                else if (type == "productmodel")
                    $scope.routepath = "ProductModelDetail";
                var temp = $cookies.get(type + "checkcache");
                if (angular.isDefined(temp) && temp != null)
                    $scope.selectnode = jQuery.parseJSON(temp);
                $scope.urlpart = type;
            }
        }

        $scope.popupcallback = function (data,primaryKey,codeKey,url) {
            //根据url存储data
            if (data != null & data.length > 0)
                $cookies.put(url + "checkcache",JSON.stringify(data));
            if (url == "process") {
                $scope.selectprocessNametip = codeKey;
                $scope.selectprocessIdtip = primaryKey;                 
            }
            else if (url == "productmodel") {
                $scope.selectproductNametip = codeKey;
                $scope.selectproductIdtip = primaryKey;
            }
        }
<!--表格弹框-->
    <div class="pop-up">
        <popup-table url="urlpart" routepath="routepath" routetype="routetype" on-callback="popupcallback(data,url)" mulitselect="true" selectnode="selectnode"></popup-table>
    </div>

相关文章

AngularJS 简介
AngularJS 是一个JavaScript 框架。它可通过 注：建议把脚本放在 元素的底部。这会提高网页加载速度，因...
angluarjs中页面初始化的时候会出现语法{{}}在页面中问题
angluarjs中页面初始化的时候会出现语法{{}}在页面中问题，也即是页面闪烁问题。出现这个的原因是：由于...
AngularJS 指令
AngularJS 通过被称为指令的新属性来扩展 HTML。AngularJS 指令AngularJS 指令是扩展的 HTML 属性，带有...
AngularJS 表达式
AngularJS 使用表达式把数据绑定到 HTML。AngularJS 表达式AngularJS 表达式写在双大括号内：{{ expres...
AngularJS 表格
ng-repeat 指令可以完美的显示表格。在表格中显示数据 {{ x.Name }} {{ x.Country }} 使用 CSS 样式为了...
AngularJS XMLHttpRequest
$http是 AngularJS 中的一个核心服务，用于读取远程服务器的数据。读取 JSON 文件下是存储在web服务器上...