详解angularjs popup-table 弹出框表格指令
本文主要介绍了angularjspopup-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; varprimaryKeyFieldName=""; varcodeFieldName=""; $scope.showAddButton=true; $scope.showRefreshButton=true; varcheckList=newArray(); //监视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){ varindex=findSelected(data); if(check){ if(index<=-1) checkList.push(data); }else{ if(index>-1) checkList.splice(index,1); } } //通过data数据在数组中查询,并返回所在的索引,没有找到则返回-1 functionfindSelected(data){ varindexvalue=-1; if(angular.isUndefined(checkList)||checkList.length<=0||primaryKeyFieldName=="") returnindexvalue; angular.forEach(checkList,function(item,index){ if(indexvalue==-1){ if(item[primaryKeyFieldName]==data[primaryKeyFieldName]){ indexvalue=index; } } }); returnindexvalue; } //判断是否选中 $scope.isChecked=function(rowdata){ returnfindSelected(rowdata)>-1; } //1、读取网络数据,分页,搜索 functionquerySearch(index,searchText){ if($scope.popupdata!=null&&$scope.popupdata.length>0) $scope.popupdata=null; //初始化 varparams={"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; varsum=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(vari=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){ varindexvalue=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){ varnewpageList=[]; for(vari=(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(){ varpage=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页开始分页转换 varnewpageList=[]; for(vari=(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); }; //关闭弹出框 functionclosewindow(){ $(".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; } varallowMulti=false; if(angular.isDefined($scope.mulitselect)){ allowMulti=$scope.mulitselect; } varprimaryKey=""; varcodeKey=""; //只存在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页面
$(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; }) } }); }) {{title}}