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


Posted in Javascript onSeptember 20, 2017

本文主要介绍了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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript操作select方法大全[新增、修改、删除、选中、清空、判断存在等]
Sep 26 Javascript
js继承 Base类的源码解析
Dec 30 Javascript
js判断运行jsp页面的浏览器类型以及版本示例
Oct 30 Javascript
JQuery的Ajax中Post方法传递中文出现乱码的解决方法
Oct 21 Javascript
Javascript控制input输入时间格式的方法
Jan 28 Javascript
javascript实现五星评价代码(源码下载)
Aug 11 Javascript
使用vue.js开发时一些注意事项
Apr 27 Javascript
JavaScript 事件对内存和性能的影响
Jan 22 Javascript
Bootstrap Scrollspy源码学习
Mar 02 Javascript
React组件重构之嵌套+继承及高阶组件详解
Jul 19 Javascript
浅析vue-router实现原理及两种模式
Feb 11 Javascript
基于aotu.js实现微信自动添加通讯录中的联系人功能
May 28 Javascript
ES6中Array.includes()函数的用法
Sep 20 #Javascript
微信小程序视图template模板引用的实例详解
Sep 20 #Javascript
highcharts 在angular中的使用示例代码
Sep 20 #Javascript
jQuery实现可兼容IE6的滚动监听功能
Sep 20 #jQuery
Bootstrap Table快速完美搭建后台管理系统
Sep 20 #Javascript
VUE页面中加载外部HTML的示例代码
Sep 20 #Javascript
JavaScript实现焦点进入文本框内关闭输入法的核心代码
Sep 20 #Javascript
You might like
学习使用PHP数组
2006/10/09 PHP
PHP Smarty生成EXCEL文档的代码
2008/08/23 PHP
php中eval函数的危害与正确禁用方法
2014/06/30 PHP
Django 中 cookie的使用
2017/08/17 PHP
jQuery 关于伪类选择符的使用说明
2013/04/24 Javascript
Jquery 跨域访问 Lightswitch OData Service的方法
2013/09/11 Javascript
jquery中的常用事件bind、hover、toggle等示例介绍
2014/07/21 Javascript
JS实现超炫网页烟花动画效果的方法
2015/03/02 Javascript
jQuery实现防止提交按钮被双击的方法
2015/03/24 Javascript
以WordPress为例讲解jQuery美化页面Title的方法
2016/05/23 Javascript
Javascrip实现文字跳动特效
2016/11/27 Javascript
jQuery实现拖拽可编辑模块功能代码
2017/01/12 Javascript
AngularJS表单验证功能分析
2017/05/26 Javascript
Bootstrap Table 在指定列中添加下拉框控件并获取所选值
2017/07/31 Javascript
探究react-native 源码的图片缓存问题
2017/08/24 Javascript
vue项目中公用footer组件底部位置的适配问题
2018/05/10 Javascript
JS+php后台实现文件上传功能详解
2019/03/02 Javascript
vue实现行列转换的一种方法
2019/08/06 Javascript
JavaScript实现图片上传并预览并提交ajax
2019/09/30 Javascript
Python输出9*9乘法表的方法
2015/05/25 Python
python编程使用selenium模拟登陆淘宝实例代码
2018/01/25 Python
Python使用Selenium爬取淘宝异步加载的数据方法
2018/12/17 Python
Python的互斥锁与信号量详解
2019/09/12 Python
python tkinter组件使用详解
2019/09/16 Python
Tensorflow轻松实现XOR运算的方式
2020/02/03 Python
HTML5 Canvas像素处理使用接口介绍
2012/12/02 HTML / CSS
俄罗斯马克西多姆家居用品网上商店:Максидом
2020/02/06 全球购物
vue路由实现登录拦截
2021/03/24 Vue.js
扬尘污染防治方案
2014/06/15 职场文书
幸福家庭标语
2014/06/27 职场文书
如何写早恋检讨书
2014/09/10 职场文书
公务员年度考核评语
2014/12/31 职场文书
银行柜员工作心得体会
2016/01/23 职场文书
详解Mysql和Oracle之间的误区
2021/05/18 MySQL
Python排序算法之插入排序及其优化方案详解
2021/06/11 Python
解决persistence.xml配置文件修改存放路径的问题
2022/02/24 Java/Android