ng-grid的server端排序/列筛选/翻页/loading

大家好,最近一直在使用angular的ng-grid,这个插件确实很好用,就是一些serverside端的操作需要自己去实现.

下面我给大家提供一些我自己写的关于server端排序/列筛选/翻页/loading的一些代码,大家可以参考.

先提倡大家看api,地址点击打开链接

下面开始正文:(本文只在添加了ng-grid和其他插件的基础上去参考...基本引入在ng-grid基础)

首先看一下我的表格(大家凑合看...)

红框圈出来分页/过滤/排序/条件 等一些

下面来看代码(不免删掉了一些有关鄙人业务的东西,有没用处的东西,大家凑合看就好)

var app = angular.module('app',['ngAnimate','cgBusy','ngTouch','ui.bootstrap','ui.grid','ui.grid.autoResize','ui.grid.pagination','ui.grid.selection','ui.grid.cellNav','ui.grid.resizeColumns','ui.grid.moveColumns','ui.grid.pinning','ui.grid.grouping' ]);
var wordTpl = {};
var pageTpl = {};
var mainknow = {};

var worp = "";
var delwpid = "";
var maindelid = "";
var filterConditions={};
var orderConditions = {};
var page=1;
var rows=50;
var genderHash = {
	    1: '类型1',2: '类型2',3: '类型3',};

var templateOp=
	[ 
		{value:'1',label: '类型1'},{value:'2',label: '类型2'},{value:'3',label: '类型3'},]
//主Controller
app.controller("mainController",function ($scope,$http) {
	$scope.delay = 0;
	$scope.minDuration = 0;
	$scope.message = 'Please Wait...';
	$scope.backdrop = true;
	$scope.promise = null;
	
	
	$scope.rowFormatter = function( row ) {
		return row.entity.gds.dbInputSumStatusJson.replace('{','').replace('}','').replace(',',';').replace(/"/g,'');
	  };
	
})
.controller('liststatusDetail',['$scope','$http','uiGridConstants','i18nService',$http,uiGridConstants,i18nService) {
	i18nService.setCurrentLang("zh-cn");
	
	$scope.highlightFilteredHeader = function(row,rowRenderIndex,col,colRenderIndex) {
	if (col.filters[0].term) {
		return 'header-filtered';
	} else {
		return '';
	}
	};
	
	$scope.gridOptions = {
	paginationPageSizes : [ 50,100,200 ],paginationPageSize : 50,enableFiltering : true,enablePaging:true,useExternalPagination: true,useExternalFiltering: true,useExternalSorting: true,onRegisterApi : function(gridApi) {
		$scope.gridApi = gridApi;
		$scope.gridApi.core.on.filterChanged( $scope,function() {//监听filter过滤条件的改变
			filterConditions={};
			console.log($scope.gridApi);
			var grid=this.grid;
			console.log(this.grid);
			grid.columns.forEach(function(column) {
				var everyFilters=[];
				column.filters.forEach(function(filter) {
//					console.log(filter.term)
		            if(filter.term!=null&&filter.term!='undefined'){
		              everyFilters.push(filter);
		            }
		        });
				if(everyFilters.length>0){
					filterConditions[column.field]=everyFilters;//生成一个自己定义的对象,以便传给后台去操作
				}
		    });
			
			console.log(filterConditions);
		});
		gridApi.pagination.on.paginationChanged($scope,function (newPage,pageSize) {//监听分页条件的改变
			console.log(newPage)
			console.log(pageSize)
			page = newPage;
			rows = pageSize;
			$scope.showStatus(orderConditions);
		});
		gridApi.core.on.sortChanged( $scope,function ( grid,sortColumns ){//监听排序条件的改变
			console.log(grid);
			console.log(sortColumns);
			orderConditions={};
			for ( var x in sortColumns) {
				orderConditions[sortColumns[x].field]=sortColumns[x].sort;//生成一个自己定义的对象,以便传给后台去操作
			}
			$scope.showStatus(orderConditions);
			
		});
	},columnDefs : [
			
			{
				field : 'jobId',type:'number',headerCellClass : $scope.highlightFilteredHeader,displayName : 'Jobid',minWidth: 150,width : '10%',},{
				field : 'taskId',displayName : '任务id',width : '10%'
			},{
				field : 'site',displayName : '站点',],};


    
	$scope.showStatus = function(order) {//获取数据方法
		var order = order||orderConditions;
		var seldate = $scope.dat.Format("yyyyMMdd");
		console.log(seldate);
		
		$scope.promise = $http({
			method:'post',url:'/url.do',data:{seldate:seldate,filterRules:JSON.stringify(filterConditions),rows:rows,page:page,sort:JSON.stringify(order)},headers:{'Content-Type': 'application/x-www-form-urlencoded'},//post传参必须
			transformRequest: function(obj) {//post传参必须
				 var str = [];
				 for(var p in obj){
					 str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
				 }
			 	return str.join("&");
			 }
		}).success(function(data){
			$scope.gridOptions.totalItems = data.total;
			$scope.gridOptions.data = data.rows;
		})
	};
	
	$scope.showStatus();
	
	$scope.clearAllfilter = function() {//清除所有筛选条件
		//clearAllFilters
		var seldate = $scope.dat.Format("yyyyMMdd");
		$scope.gridApi.core.clearAllFilters();
		$scope.showStatus();
		
	};
	
}]) 

前台代码大概就是这么多,还有一个loading的东西,是angular的一个插件,地址给大家,自己去研究一下,很ez.地址:loading加载-angular-busy

前台主要是把一些要传给后台去处理的数据打好包,后台去处理,然后去解析下,拿到想要的值

后端是我自己写了一个分页/排序/过滤的就算架子吧,用这个架子,前端传来参数,后边直接解析然后把sql就拼成了.

后端代码如果有需要私信我就好,在此就不献丑了.

谢谢大家.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!