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'},]//主Controllerapp.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() {//清除所有筛选条件//clearAllFiltersvar seldate = $scope.dat.Format("yyyyMMdd");$scope.gridApi.core.clearAllFilters();$scope.showStatus();};}]) 

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

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

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

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

谢谢大家.