详解angularjs popup-table 弹出框表格指令

2023-09-24 09:57:10 358

本文主要介绍了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}}

查询

0"style="border-top:0px">

序号 {{column.DisplayColumnName}}

无数据

详解angularjs popup-table 弹出框表格指令

热门推荐

随机推荐