大佬教程收集整理的这篇文章主要介绍了angularjs – 使用WebAPI进行ng网格的服务器端页面筛选排序，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
更新#1：建议的解决方案似乎有效，但仅适用于第1页。每当我移动到新页面或进行任何其他需要刷新的操作时，即使服务器返回的数据按预期更改，显示的数据也保持不变。另外，从所有的代码示例中，我发现设置数据的正确方法似乎只是替换数组成员的值，而不是清空并重新填充它。我试过与https://groups.google.com/forum/#!searchin/angular/nggrid/angular/vUIfHWt4s_4/oU_C9w8j-uMJ提出的申请，但我得到相同的结果。
服务器端
只需创建一个新的MVC4应用程序，更新NuGet软件包，并添加角度和ng网格软件包。
我的假数据模型由Item类表示：
public sealed class Item { public int id { get; set; } public String Name { get; set; } public int age { get; set; } public bool IsFemale { get; set; } }
我还添加了几个模型来处理分页，过滤和排序各种数据集(我发现更容易有一个常见的寻呼基础模型-PagedFilter-和一些派生模型)：
public class PagedFilter { privatE int _nPageSize; privatE int _nPagenumber; public int PageSize { get { return _nPageSize; } set { if (value < 1) throw new ArgumentOutOfRangeException("value"); _nPageSize = value; } } public int Pagenumber { get { return _nPagenumber; } set { if (value < 1) throw new ArgumentOutOfRangeException("value"); _nPagenumber = value; } } public int @R_305_10586@lItems { get; set; } public int @R_305_10586@lPages { get { return (int)R_2_11845@ath.Ceiling((doublE)(@R_305_10586@lItems / PageSizE)); } } public PagedFilter() { _nPageSize = 20; _nPagenumber = 1; } }
这是ItemFilter：
public class ItemFilter : PagedFilter { public List<String> SortFields { get; set; } public List<String> SortDirections { get; set; } public String Name { get; set; } public int? MinAge { get; set; } public int? MaxAge { get; set; } }
public class ItemController : ApiController { // fake data private readonly List<Item> _items; public ItemController() { Random rnd = new Random(); _items = new List<Item>(); char c = 'a'; for (int i = 0; i < 1000; i++) { _items.Add(new Item { Id = i,Age = rnd.Next(1,100),IsFemale = ((i & 1) == 0),Name = String.Format(CultureInfo.InvariantCulture,"{0:00000}-{1}",i,new String(c,5)) }); if (++c > 'z') c = 'a'; } } public dynamic Get([FromUri] ItemFilter filter) { var items = _items.AsQueryable(); // filtering if (!String.IsNullOrEmpty(filter.Name)) items = items.Where(i => i.Name.Contains(filter.Name)); if (filter.MinAge.Hasvalue) items = items.Where(i => i.Age >= filter.MinAge.value); if (filter.MaxAge.Hasvalue) items = items.Where(i => i.Age <= filter.MaxAge.value); // ...sorTing (using Dynamic Linq) omitted for brevity... // paging int n@R_305_10586@lItems = items.Count(); items = items.Skip((filter.Pagenumber - 1) * filter.PageSizE) .Take(filter.PageSizE); return new { @R_305_10586@lItems = n@R_305_10586@lItems,items = items.ToArray() }; } }
客户端
在客户端，我的角度应用程序只是在Ng网格样本上建立的单个控制器：因此，我直接添加属性到$ scope，即使在一个现实世界的情况下，我宁愿使用一个模型(可能从一个TypeScript类)。 HTML：
<div ng-app="MyApp" ng-controller="MainController">
<div ng-grid="gridoptions" style="height: 400px">
</div>
</div>
JS：
var app = angular.module('MyApp',['ngGrid']);
app.controller('MainController',['$scope','$http',function ($scope,$http,$apply) {
$scope.items = [];
// filter
$scope.filterOptions = {
filterText: "",useExternalFilter: true
};
// paging
$scope.@R_305_10586@lServerItems = 0;
$scope.pagingOptions = {
pageSizes: [25,50,100],pageSize: 25,currentPage: 1
};
// sort
$scope.sortOptions = {
fields: ["name"],directions: ["ASC"]
};
// grid
$scope.gridoptions = {
data: "items",columnDefs: [
{ field: "name",displayName: "Name",pinnable: true },{ field: "age",displayName: "Age",width: "60" },{ field: "isFemale",displayName: "F",width: "40" }
],enablePaging: true,enablePinning: true,pagingOptions: $scope.pagingOptions,filterOptions: $scope.filterOptions,keepLastSELEcted: true,multiSELEct: false,showcolumnMenu: true,showFilter: true,showGroupPanel: true,showFooter: true,sorTinfo: $scope.sortOptions,@R_305_10586@lServerItems: "@R_305_10586@lServerItems",useExternalSorTing: true,i18n: "en"
};
$scope.refresh = function() {
setTimeout(function () {
var p = {
name: $scope.filterOptions.filterText,pagenumber: $scope.pagingOptions.currentPage,pageSize: $scope.pagingOptions.pageSize,sortFields: $scope.sortOptions.fields,sortDirections: $scope.sortOptions.directions
};
$http({
url: "/api/item",method: "GET",params: p
}).success(function(data,status,headers,config) {
$scope.@R_305_10586@lServerItems = data.@R_305_10586@lItems;
// SUGGESTION #1 -- empty and fill the array
/* $scope.items.length = 0;
angular.forEach(data.items,function (item) {
$scope.items.push(item);
});
*/
// https://groups.google.com/forum/#!searchin/angular/nggrid/angular/vUIfHWt4s_4/oU_C9w8j-uMJ
$scope.$apply(function () { $scope.items = data.items; });
if (!$scope.$$phasE) {
$scope.$apply();
}
}).error(function(data,config) {
alert(JSON.Stringify(data));
});
},100);
};
// watches
$scope.$watch('pagingOptions',function (newVal,oldVal) {
if (newVal !== oldVal && newVal.currentPage !== oldVal.currentPagE) {
$scope.refresh();
}
},truE);
$scope.$watch('filterOptions',oldVal) {
if (newVal !== oldVal) {
$scope.refresh();
}
},truE);
$scope.$watch('sortOptions',truE);
$scope.refresh();
}]);
在我的代码中，成功回调被调用，我可以浏览data.items中的所有返回的项。然而，网格中没有显示任何内容。控制台中没有出现错误。
以上是大佬教程为你收集整理的angularjs – 使用WebAPI进行ng网格的服务器端页面筛选排序全部内容，希望文章能够帮你解决angularjs – 使用WebAPI进行ng网格的服务器端页面筛选排序所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
