详解angularjs popup-table 弹出框表格指令

//表格处理 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, function (item, 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, function (item, 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("请输入跳转页数", "", "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, function (item, 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());       }     }   }; }]); 

<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)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="刷新" class="cBlue">               <span>刷新</span>             </a>           </li>           <li ng-click="PopupOK()">             <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="确定" class="cBlue">               <span>确定</span>             </a>           </li>           <li ng-click="PopupCancel()">             <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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,primaryKey, codeKey,url)" mulitselect="true" selectnode="selectnode"></popup-table>   </div>