在线报名小程序_详解angularjs popup

详解angularjs popup-table 弹出框表格指令       本篇文章主要介绍了angularjs popup-table 弹出框表格指令,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
//表格处理 app.directive('popupTable', ['$http', '$rootScope', '$cookies', '$location', function ($http, $rootScope, $cookies, $location) { return { restrict: 'E', ', 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、读取网络数据,分页,搜索 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) { (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 
 div {{title}} /div 
 div 
 input id="searchText" type="text" size="30" placeholder="请输入查询条件" 
 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="查询" 
 span 查询 /span 
 /li 
 /ul 
 /div 
 div 
 div 
 table 
 tr nf-if="columnlist.length 0" 
 input id="titleCheck-all" name="checkRow" type="checkbox" ng-model="checkallvalue" ng-change="checkall()" 
 /td 
 td 序号 /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 name="checkRow" type="checkbox" ng-model="data.selected" ng-change="changeChoose(data.selected,data)" ng-checked="isChecked(data)" /td 
 td {{ $index + 1 }} /td 
 td ng-repeat="column in columnlist|orderBy:column.PopupColumnOrder" ng-show="{{column.IsPopoupColumn}}" datacolumn="{{column.ColumnName}}" {{data[column.ColumnName]}} /td 
 /tr 
 /table 
 div 
 span 无数据 /span 
 /div 
 div ng-if="loading" 
 div 
 div /div 
 div /div 
 div /div 
 div /div 
 div /div 
 div /div 
 div /div 
 div /div 
 div /div 
 div /div 
 div /div 
 div /div 
 /div 
 /div 
 /div 
 div 
 div 
 div 
 nav 
 input type="text" size="5" value="" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')" / 
 /li 
 a ng-click="jump()" 
 div data-icon="" /div 
 /li 
 /ul 
 /nav 
 /div 
 div 
 span 共0条数据 /span 
 span 当前第1页/共1页 /span 
 /div 
 div 
 nav 
 a ng-click="Previous()" 
 div data-icon="" /div 
 /li 
 li ng-repeat="page in pageList" ng- 
 a ng-click="selectPage(page)" {{ page }} /a 
 /li 
 a ng-click="Next()" 
 div data-icon="" /div 
 /li 
 /ul 
 /nav 
 /div 
 /div 
 /div 
 div 
 div 
 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="新增" 
 span 新增 /span 
 /li 
 /ul 
 /div 
 div 
 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="刷新" 
 span 刷新 /span 
 /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="确定" 
 span 确定 /span 
 /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="取消" 
 span 取消 /span 
 /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 popup-table url="urlpart" routepath="routepath" routetype="routetype" on-callback="popupcallback(data,primaryKey, codeKey,url)" mulitselect="true" selectnode="selectnode" /popup-table /div

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


相关阅读