Peut slickgrid page et afficher json

Question

Nous voulons charger plusieurs milliers d'enregistrements au client lorsque la page est demandée et avoir les 25 premiers enregistrements affichés. L'utilisateur devrait alors être en mesure de faire défiler les enregistrements ou de recourir à la colonne ou au filtre pour afficher les données dans différentes colonnes. Nous choisissons de charger les données au client en une seule fois parce que nous préférons avoir une charge plus lourde dans la demande de page et des performances plus rapides lors de la visualisation ou de la modification des données après. Je ne vois aucun exemple de pagination sur le site SlickGrid. Est-ce que SlickGrid a une pagination ou est-ce si léger que je devrais l'implémenter moi-même? Est-ce que quelqu'un a des liens ou des exemples à partager qui me donnerait une longueur d'avance?

Les données que nous utiliserons seront des données json.

Answer 1

J'ai codé avec slickgrid depuis environ une semaine maintenant et j'ai trouvé que je devais écrire le tri et le code de filtre moi-même. En regardant à travers la source, je ne vois rien qui indique que la pagination est intégrée. Vous passerez beaucoup de temps à écrire du code, mais cela en vaut la peine.

J'ai chargé 30 000 lignes de données en utilisant ajax/json et il charge et trie en moins d'une seconde. Je ne sais pas si ce sera de l'aide, mais c'est la méthode que j'appelle pour charger ma grille. Il trie sur le client et les filtres sur le serveur:

$.getJSON(baseUrl + '/_GetNewHires?filter=' + filter, function (data) { 
    grid = new Slick.Grid($("#NewHiresGrid"), data, columns, options); 

    grid.onSort = function (sortCol, sortAsc) { 
     sortdir = sortAsc ? 1 : -1; 
     sortcol = sortCol.field; 

     if (sortAsc == true) 
      data.sort(compare); 
     else 
      data.reverse(compare); 

     grid.render(); 
    }; 
}); 

Lorsque la méthode de tri est appelée, le tableau lié à la grille (données) est réarrangé, puis la grille est rechargée en utilisant la méthode .render() . Pour mettre en page, vous devez avoir un tableau de toutes les données et un tableau de données affichées.

Il a un exemple de pagination here, mais étant l'amateur javascript je suis, il est difficile pour moi de suivre.

Answer 2

Cela m'a laissé perplexe pendant un certain temps aussi, jusqu'à ce que je le code ci-dessous pour travailler:

grid = new Slick.Grid("#myGrid", data, columns, options); 
grid.onSort.subscribe(function(e,args) { 
    sortcol = args.sortCol; 
    sortAsc = args.sortAsc; 

    alert("Sort On " + sortcol.field); 

    if (sortAsc == true) { 
     data.sort(function (a, b) { 
      var nameA = a[sortcol.field].toLowerCase(), nameB = b[sortcol.field].toLowerCase() 
      if (nameA < nameB) //sort string ascending 
       return -1 
      if (nameA > nameB) 
       return 1 
      return 0 //default return value (no sorting) 
     }); 
    } else { 
     data.reverse(function (a, b) { 
      var nameA = a[sortcol.field].toLowerCase(), nameB = b[sortcol.field].toLowerCase() 
      if (nameA < nameB) //sort string ascending 
       return -1 
      if (nameA > nameB) 
       return 1 
      return 0 //default return value (no sorting) 
     }); 
    } 

    grid.invalidateAllRows(); 
    grid.render(); 
}); 

Answer 3

Il y a un soutien à la pagination SlickGrid/slick.dataview.js

dataView = new Slick.Data.DataView(); 
grid = new Slick.Grid("#myGrid", dataView, columns, options); 
dataView.setPagingOptions({ 
    pageSize: 25, 
}); 
var pager = new Slick.Controls.Pager(dataView, grid, $("#myPager")); 

Vous aimerez aussi vouloir quelque part sur votre page pour qu'il soit rendu.

<div id="myPager"></div> 

Answer 4

//set columns 
var columns = [ 
    { 
     id: "mid", 
     name: "MID", 
     field: "mid", 
     cssClass: "cell-title", 
     sortable: true, 
     sorter:comparer 
    }, 
    { 
     id: "id", 
     name: "ID", 
     field: "id", 
     cssClass: "cell-title", 
     sortable: true, 
     sorter:NumericSorter 
    }, 

dans l'ensemble au-dessus de la trieuse

var sortcol = "title"; 
var sortdir = 1; 
var percentCompleteThreshold = 0; 
var searchString = ""; 

this.grid.onSort = function(sortCol, sortAsc) { 
    sortdir = sortAsc ? 1 : -1; 
    sortcol = sortCol.field; 
    this.dataView.sort(sortCol.sorter); 
    this.grid.render(); 

}.bind(this); 

function comparer(a,b) { 
    var x = a[sortcol], y = b[sortcol]; 
    return sortdir * (x == y ? 0 : (x > y ? 1 : -1)); 
} 

// Define some sorting functions 
function NumericSorter(a, b) { 
    return sortdir * (a[sortcol]-b[sortcol]); 
} 

Answer 5

J'ai écrit un plugin de téléavertisseur, le SlickGrid Amélioration Pager, qui utilise des SlickGrid beaucoup plus facile pagination. Il prend entièrement en charge json. S'il vous plaît voir ce project sur github.