本篇文章主要介绍了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> 
  <div>{{title}}</div> 
  <div> 
    <input id="searchText" type="text" size="30"> 
    <ul> 
      <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="查询"> 
          <span>查询</span> 
        </a> 
      </li> 
    </ul> 
  </div> 
  <div> 
    <div> 
      <table> 
        <tr nf-if="columnlist.length>0"> 
          <td> 
            <input id="titleCheck-all" name="checkRow" type="checkbox" ng-model="checkallvalue" ng-change="checkall()" > 
          </td> 
          <td>序号</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 name="checkRow" type="checkbox" ng-model="data.selected" ng-change="changeChoose(data.selected,data)" ng-checked="isChecked(data)"></td> 
          <td>{{ $index + 1 }}</td> 
          <td ng-repeat="column in columnlist|orderBy:column.PopupColumnOrder" ng-show="{{column.IsPopoupColumn}}" datacolumn="{{column.ColumnName}}">{{data[column.ColumnName]}}</td> 
        </tr> 
      </table> 
      <div> 
        <span>无数据</span> 
      </div> 
      <div ng-if="loading"> 
        <div class='uil-default-css' style='transform: scale(0.2); width: 100% !important; height: 300px !important;'> 
          <div style=' -webkit-transform:rotate(0deg) translate(0,-60px) ; transform:rotate(0deg) translate(0,-60px);'></div> 
          <div style=' -webkit-transform: rotate(30deg) translate(0,-60px); transform: rotate(30deg) translate(0,-60px);'></div> 
          <div style=' -webkit-transform: rotate(60deg) translate(0,-60px); transform: rotate(60deg) translate(0,-60px);'></div> 
          <div style=' -webkit-transform: rotate(90deg) translate(0,-60px); transform: rotate(90deg) translate(0,-60px);'></div> 
          <div style=' -webkit-transform: rotate(120deg) translate(0,-60px); transform: rotate(120deg) translate(0,-60px);'></div> 
          <div style=' -webkit-transform: rotate(150deg) translate(0,-60px); transform: rotate(150deg) translate(0,-60px);'></div> 
          <div style=' -webkit-transform: rotate(180deg) translate(0,-60px); transform: rotate(180deg) translate(0,-60px);'></div> 
          <div style=' -webkit-transform: rotate(210deg) translate(0,-60px); transform: rotate(210deg) translate(0,-60px);'></div> 
          <div style=' -webkit-transform: rotate(240deg) translate(0,-60px); transform: rotate(240deg) translate(0,-60px);'></div> 
          <div style=' -webkit-transform: rotate(270deg) translate(0,-60px); transform: rotate(270deg) translate(0,-60px);'></div> 
          <div style=' -webkit-transform: rotate(300deg) translate(0,-60px); transform: rotate(300deg) translate(0,-60px);'></div> 
          <div style=' -webkit-transform: rotate(330deg) translate(0,-60px); transform: rotate(330deg) translate(0,-60px);'></div> 
        </div> 
      </div> 
    </div> 
    <div> 
      <div> 
        <div> 
          <nav> 
            <ul> 
              <li> 
                <input type="text" value="" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')" /> 
              </li> 
              <li> 
                <a ng-click="jump()"> 
                  <div></div> 
                </a> 
              </li> 
            </ul> 
          </nav> 
        </div> 
        <div> 
          <span>共0条数据</span> 
          <span>当前第1页/共1页</span> 
        </div> 
        <div> 
          <nav> 
            <ul> 
              <li> 
                <a ng-click="Previous()"> 
                  <div></div> 
                </a> 
              </li> 
              <li ng-repeat="page in pageList" ng-class="{active: isActivePage(page)}"> 
                <a ng-click="selectPage(page)">{{ page }}</a> 
              </li> 
              <li> 
                <a ng-click="Next()"> 
                  <div></div> 
                </a> 
              </li> 
            </ul> 
          </nav> 
        </div> 
      </div> 
    </div> 
    <div> 
      <div> 
        <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="新增"> 
              <span>新增</span> 
            </a> 
          </li> 
        </ul> 
      </div> 
      <div> 
        <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="刷新"> 
              <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="确定"> 
              <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="取消"> 
              <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> 
    <popup-table url="urlpart" routepath="routepath" routetype="routetype" on-callback="popupcallback(data,primaryKey, codeKey,url)" mulitselect="true" selectnode="selectnode"></popup-table> 
  </div> 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持爱安网。

最新资讯
重庆理想智造汽车有限公司再被执行 累计执行标的超一千万

重庆理想智造汽车有限

近日,重庆理想智造汽车有限公司再成被执行人,于11月25日
商务部确认第二批48家数字商务企业 包括菜鸟、唯品会等

商务部确认第二批48家

11月26日,在贵阳举行的全国电子商务工作会议上,商务部电
全国电子商务工作会议:大力发展跨境电商 积极推进丝路电商

全国电子商务工作会议

会议要求,2021年电子商务要开好局、起好步。抓顶层设计
何小鹏发全员信:智能汽车成本持续下降 不能只看短期股价涨跌

何小鹏发全员信:智能汽

小鹏汽车董事长兼CEO何小鹏今天发布一封全员邮件,他表
同程艺龙与快手达成战略合作 用户可在快手直接预订旅行服务

同程艺龙与快手达成战

同程艺龙与快手宣布达成战略合作。
代购失业,黑五还在,谁在替你买遍全球?

代购失业,黑五还在,谁在

今年前五个月,中国跨境电商零售出口逆势增长,同比增长12
最新文章
详解Vue的ref特性的使用

详解Vue的ref特性的使

这篇文章主要介绍了详解Vue的ref特性的使用,文中通过
vue学习笔记之slot插槽基本用法实例分析

vue学习笔记之slot插

这篇文章主要介绍了vue学习笔记之slot插槽基本用法,结
vue跳转方式(打开新页面)及传参操作示例

vue跳转方式(打开新页

这篇文章主要介绍了vue跳转方式(打开新页面)及传参操作,
vue学习笔记之过滤器的基本使用方法实例分析

vue学习笔记之过滤器

这篇文章主要介绍了vue学习笔记之过滤器的基本使用方
js获取本日、本周、本月的时间代码

js获取本日、本周、本

本篇文章给大家分享的内容是利用js如何获取本日、本周
node crawler如何添加promise支持

node crawler如何添加

这篇文章主要介绍了node crawler如何添加promise支持,