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', function ($scope, $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',
				headerCellClass : $scope.highlightFilteredHeader,
				displayName : '任务id',
				minWidth: 150,
				width : '10%'
			},
			{
				field : 'site',
				headerCellClass : $scope.highlightFilteredHeader,
				displayName : '站点',
				minWidth: 150,
				width : '10%'
			},
			 ],
	};


    
	$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就拼成了.

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

谢谢大家.