详解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> 

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