DDR爱好者之家 Design By 杰米
本文主要介绍了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: '=""; 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 ".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 ".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 ".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 ".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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
DDR爱好者之家 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
DDR爱好者之家 Design By 杰米
暂无评论...
更新日志
2024年11月27日
2024年11月27日
- 凤飞飞《我们的主题曲》飞跃制作[正版原抓WAV+CUE]
- 刘嘉亮《亮情歌2》[WAV+CUE][1G]
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE][1.8G]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[320K/MP3][193.25MB]
- 【轻音乐】曼托凡尼乐团《精选辑》2CD.1998[FLAC+CUE整轨]
- 邝美云《心中有爱》1989年香港DMIJP版1MTO东芝首版[WAV+CUE]
- 群星《情叹-发烧女声DSD》天籁女声发烧碟[WAV+CUE]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[FLAC/分轨][748.03MB]
- 理想混蛋《Origin Sessions》[320K/MP3][37.47MB]
- 公馆青少年《我其实一点都不酷》[320K/MP3][78.78MB]
- 群星《情叹-发烧男声DSD》最值得珍藏的完美男声[WAV+CUE]
- 群星《国韵飘香·贵妃醉酒HQCD黑胶王》2CD[WAV]
- 卫兰《DAUGHTER》【低速原抓WAV+CUE】
- 公馆青少年《我其实一点都不酷》[FLAC/分轨][398.22MB]
- ZWEI《迟暮的花 (Explicit)》[320K/MP3][57.16MB]