详解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 相关文章推荐
js两行代码按指定格式输出日期时间
Oct 21 Javascript
表单类各种类型(文本框)失去焦点效果jquery代码
Apr 26 Javascript
$.each与$().each的区别示例介绍
Mar 20 Javascript
基于jQuery实现Div窗口震动特效代码-代码简单
Aug 28 Javascript
Bootstrap轮播插件简单使用方法介绍
Jun 21 Javascript
js利用clipboardData实现截屏粘贴功能
Oct 12 Javascript
JS模拟实现ECMAScript5新增的数组方法
Mar 20 Javascript
微信小程序实现滑动删除效果
May 19 Javascript
使用JS组件实现带ToolTip验证框的实例代码
Aug 23 Javascript
Electron autoUpdater实现Windows安装包自动更新的方法
Dec 24 Javascript
Vue 列表上下过渡效果的实例代码
Jun 25 Javascript
vuex管理状态 刷新页面保持不被清空的解决方案
Nov 11 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中++i 与 i++ 的区别
2012/08/08 PHP
php对文件进行hash运算的方法
2015/04/03 PHP
visual studio code 调试php方法(图文详解)
2017/09/15 PHP
PHP网站常见安全漏洞,及相应防范措施总结
2021/03/01 PHP
Javascript下的keyCode键码值表
2007/04/10 Javascript
慎用 somefunction.prototype 分析
2009/06/02 Javascript
浅谈JavaScript之事件绑定
2013/07/08 Javascript
JavaScript1.6数组新特性介绍以及JQuery的几个工具方法
2013/12/06 Javascript
jQuery实现当前页面标签高亮显示的方法
2015/03/10 Javascript
jquery 构造函数在表单提交过程中修改数据
2015/05/25 Javascript
jquery中val()方法是从最后一个选项往前读取的
2015/09/06 Javascript
第五章之BootStrap 栅格系统
2016/04/25 Javascript
BootStrap制作导航条实例代码
2016/05/06 Javascript
JavaScript用构造函数如何获取变量的类型名
2016/12/23 Javascript
用JavaScript实现让浏览器停止载入页面的方法
2017/01/19 Javascript
详解vue的数据binding绑定原理
2017/04/12 Javascript
nodejs入门教程六:express模块用法示例
2017/04/24 NodeJs
jquery仿微信聊天界面
2017/05/06 jQuery
深入解析nodejs HTTP服务
2017/07/25 NodeJs
react native仿微信PopupWindow效果的实例代码
2017/08/07 Javascript
vue动态路由实现多级嵌套面包屑的思路与方法
2017/08/16 Javascript
详解基于 Node.js 的轻量级云函数功能实现
2019/07/08 Javascript
Vue基于iview table展示图片实现点击放大
2020/08/05 Javascript
Pthon批量处理将pdb文件生成dssp文件
2015/06/21 Python
200行自定义python异步非阻塞Web框架
2017/03/15 Python
python 读取DICOM头文件的实例
2018/05/07 Python
Python中存取文件的4种不同操作
2018/07/02 Python
python 监测内存和cpu的使用率实例
2019/11/28 Python
20行代码教你用python给证件照换底色的方法示例
2021/02/05 Python
python 中 .py文件 转 .pyd文件的操作
2021/03/04 Python
日本最大的药妆连锁店:Matsukiyo松本清药妆店
2017/11/23 全球购物
英国和世界各地预订便宜的酒店:LateRooms.com
2019/05/05 全球购物
学生个人求职自荐信格式
2013/09/23 职场文书
彩妆大赛策划方案
2014/05/13 职场文书
孝敬父母的演讲稿
2014/05/14 职场文书
学生党员一帮一活动总结
2014/07/08 职场文书