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

本文主要介绍了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());
      }
    }
  };
}]);

模板的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)" 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> 

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。