详解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 相关文章推荐
ImageFlow可鼠标控制图片滚动
Jan 30 Javascript
原创javascript小游戏实现代码
Aug 19 Javascript
javascript使用eval或者new Function进行语法检查
Oct 16 Javascript
javascript遍历控件实例详细解析
Jan 10 Javascript
JS实现鼠标箭头变成一个燃烧烛光效果的方法
Feb 28 Javascript
JS实现弹出居中的模式窗口示例
Jun 20 Javascript
vue2.0开发实践总结之入门篇
Dec 06 Javascript
简单的vuex 的使用案例笔记
Apr 13 Javascript
微信小程序实现购物页面左右联动
Feb 15 Javascript
微信小程序防止多次点击跳转和防止表单组件输入内容多次验证功能(函数防抖)
Sep 19 Javascript
vue+element获取el-table某行的下标,根据下标操作数组对象方式
Aug 07 Javascript
Node.js文本文件BOM头的去除方法
Nov 22 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
UCenter中的一个可逆加密函数authcode函数代码
2010/07/20 PHP
PHP SOCKET编程详解
2015/05/22 PHP
解决nginx不支持thinkphp中pathinfo的问题
2015/07/21 PHP
给WordPress的编辑后台添加提示框的代码实例分享
2015/12/25 PHP
jquery BS,dialog控件自适应大小
2009/07/06 Javascript
基于json的jquery地区联动效果代码
2011/07/06 Javascript
js自动下载文件到本地的实现代码
2013/04/28 Javascript
jquery实现无限分级横向导航菜单的方法
2015/03/12 Javascript
js钢琴按钮波浪式图片排列效果代码分享
2015/08/26 Javascript
jQuery javascript获得网页的高度与宽度的实现代码
2016/04/26 Javascript
详解Vue2 无限级分类(添加,删除,修改)
2017/03/07 Javascript
ES6字符串模板,剩余参数,默认参数功能与用法示例
2017/04/06 Javascript
Element UI框架中巧用树选择器的实现
2018/12/12 Javascript
vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例
2019/03/08 Javascript
jQuery实现动态加载(按需加载)javascript文件的方法分析
2019/05/31 jQuery
vue如何实现自定义底部菜单栏
2019/07/01 Javascript
详解vue中v-bind:style效果的自定义指令
2020/01/21 Javascript
jQuery实现推拉门效果
2020/10/19 jQuery
[47:55]Ti4第二日主赛事败者组 NaVi vs EG 1
2014/07/20 DOTA
python 快速排序代码
2009/11/23 Python
运用TensorFlow进行简单实现线性回归、梯度下降示例
2018/03/05 Python
django admin.py 外键,反向查询的实例
2019/07/26 Python
Python3 用什么IDE开发工具比较好
2020/11/28 Python
python UDF 实现对csv批量md5加密操作
2021/01/01 Python
纯CSS3实现图片无间断轮播效果
2016/08/25 HTML / CSS
html5+css3之动画在webapp中的应用
2014/11/21 HTML / CSS
利用CSS3的线性渐变linear-gradient制作边框的示例
2016/06/02 HTML / CSS
CSS3实现网站商品展示效果图
2020/01/18 HTML / CSS
数据库基础的一些面试题
2012/02/25 面试题
捷科时代的软件测试笔试题
2015/11/09 面试题
主题实践活动总结
2014/05/08 职场文书
优秀安全员事迹材料
2014/05/11 职场文书
2014年纠风工作总结
2014/12/08 职场文书
数据库连接池
2021/04/06 MySQL
js实现上传图片到服务器
2021/04/11 Javascript
React 高阶组件HOC用法归纳
2021/06/13 Javascript