angularjs - columndefs - Navegación en el lado del servidor+filtrado+clasificación para ng-grid con WebAPI

ui-grid columndefs (6)

Estoy tratando de crear un ejemplo de trabajo simple de usar ng-grid con ASP.NET WebAPI. Por lo tanto, comencé desde el ejemplo de paginación del lado del servidor en la página de ejemplos de ng-grid ( http://angular-ui.github.io/ng-grid/ ); de todos modos, mi cuadrícula siempre muestra columnas vacías, incluso si al depurar puedo confirmar que los datos se reciban correctamente. Probablemente me falta algo en la configuración de la cuadrícula, pero todas las muestras que encontré son similares a las mías. ¿Alguien podría ayudar? Aquí esta lo que hice:

Actualización n. ° 1 : la solución sugerida parece funcionar pero solo para la primera página. Cada vez que me muevo a una nueva página o realizo cualquier otra operación que requiera una actualización, los datos mostrados siguen siendo los mismos, incluso si el servidor devolvió los datos como se esperaba. Además, de todos los ejemplos de código que encontré, parece que la forma correcta de configurar los datos es simplemente reemplazar el valor del miembro de la matriz en lugar de vaciarlo y llenarlo nuevamente. Intenté con aplicar como se sugiere en https://groups.google.com/forum/#!searchin/angular/nggrid/angular/vUIfHWt4s_4/oU_C9w8j-uMJ , pero obtengo el mismo resultado.

Lado del servidor

Simplemente cree una nueva aplicación MVC4, actualice los paquetes NuGet y agregue paquetes angulares y ng-grid. Mi modelo de datos falsos está representado por la clase 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; } }

También agrego un par de modelos para tratar con paginación, filtrado y clasificación de varios conjuntos de datos (me resulta más fácil tener un modelo base de paginación común -PagedFilter-, y una serie de modelos derivados):

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 TotalItems { get; set; } public int TotalPages { get { return (int)Math.Ceiling((double)(TotalItems / PageSize)); } } public PagedFilter() { _nPageSize = 20; _nPageNumber = 1; } }

Aquí está el 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; } }

Luego agrego un controlador API para obtener elementos:

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 nTotalItems = items.Count(); items = items.Skip((filter.PageNumber - 1) * filter.PageSize) .Take(filter.PageSize); return new { totalItems = nTotalItems, items = items.ToArray() }; } }

Lado del cliente

En el lado del cliente, mi aplicación angular es solo un controlador modelado en la muestra ng-grid: por lo tanto, agrego propiedades directamente a $ scope, incluso si en un escenario del mundo real prefiero usar un modelo (probablemente generado a partir de Clase de TypeScript). HTML:

<div ng-app="MyApp" ng-controller="MainController"> <div ng-grid="gridOptions" style="height: 400px"> </div> </div>

JS:

En mi código, se llama a la devolución de llamada correcta y puedo buscar todos los elementos devueltos en data.items. Sin embargo, no se muestra nada en la cuadrícula. Ningún error aparece en la consola.

Después de experimentar un poco, creo que encontré el código correcto. Esta publicación sobre $ apply me ayudó un poco: http://jimhoskins.com/2012/12/17/angularjs-and-apply.html . De hecho, si entiendo bien, la llamada para aplicar no debería ser necesaria en absoluto, dado que mis datos proceden de $ http, que ya lo proporciona. Entonces, terminé simplemente configurando la variable de elementos de ámbito en la devolución de llamada correcta. Aquí está el JS completo nuevamente, espero que esto pueda ayudar a un recién llegado como yo. Ahora voy a ampliar la prueba con modelos de TypeScript, servicios y todas las cosas del mundo real: me temo que tendré que hacer una nueva publicación ... :)

(Como nota al margen, puede ver en el código que estoy pasando una sola cadena para ordenar datos, en lugar de dos matrices para campos y direcciones. De hecho, no pude encontrar la forma correcta de recibir matrices como miembros de mi entrada modelo en el controlador C #, por lo que estoy pasando una sola secuencia donde cada nombre de campo está prefijado por + o - de acuerdo con la dirección ascendente / descendente).

Está configurando el origen de datos en ng-grid para los items pero nunca actualiza la matriz de elementos en la devolución de llamada exitosa del servidor.

En la devolución de llamada de succcess haz algo como esto

$scope.totalServerItems = data.totalItems; angular.forEach(data.items, function(item) { $scope.items.push(item); });

La última documentación es bastante explícita sobre esta pregunta: http://ui-grid.info/docs/#/tutorial/308_external_filtering

Mi código resultante:

¡Bien, ahora el lado del cliente está hecho! Tienes que procesarlo desde el servidor, no puedo ayudarte con .Net WebAPI ya que estoy manejando PHP / Mysql ...

Recientemente he estado trabajando con ng-grid. Me encontré con problemas similares cuando hacía referencia a la nueva versión de AngularJS. Asegúrese de hacer referencia al archivo min angular 1.0.2.

Aquí está mi código del lado del cliente para la ng-grid con paginación. Funciona perfectamente una vez que se implementó la versión adecuada de Angular JS.

});

Simplemente haz clic en Muestra en el sitio web angular:

$http({ url: "/payments/GetPayments", method: "GET", params: p }).success(function(data, status, headers, config) { // Как в примере $scope.items = data.items; $scope.totalServerItems = data.totalItems; if (!$scope.$$phase) { $scope.$apply(); } }).error(function(data, status, headers, config) { alert(JSON.stringify(data)); });

También podría ayudar

El código HTML-muestra

<html ng-app="myApp"> <head lang="en"> <meta charset="utf-8"> <title>Getting Started With ngGrid code-sample</title> <script type="text/javascript" src="angular.js"></script> <script type="text/javascript" src="ng-grid-1.3.2.js"></script> </head> <body ng-controller="MyCtrl"> <div class="gridStyle" ng-grid="gridOptions"></div> </body> </html>

La muestra de código de AngulaJs