可以滑動頁面並顯示json

當請求頁面並顯示前25條記錄時，我們希望將數千條記錄加載到客戶端。然後，用戶應該能夠遍歷記錄，或按列逐個列出或按各列中的數據過濾。我們選擇一次性將數據加載到客戶端，因爲我們寧願在頁面請求中承受更重的負載，以及之後查看或編輯數據時的性能更快。我看不到在SlickGrid網站上進行分頁的任何示例。 SlickGrid是否有分頁功能，或者它是如此輕量級的，我必須自己實現這個功能嗎？有沒有人有任何鏈接或例子分享，會給我一個頭馬？可以滑動頁面並顯示json

我們將使用的數據將是json數據。

來源

2010-11-16 lloydphillips

我一直使用slickgrid編寫了大約一個星期，發現我必須自己編寫排序和過濾代碼。從源頭上看，我沒有看到任何表明分頁內置的東西。你將花費大量的時間爲它編寫代碼，但它似乎是值得的。

我使用ajax/json加載了30,000行數據，並且它在不到1秒內加載和排序。我不知道它是否會有幫助，但這是我調用的加載我的網格的方法。它排序的客戶端和過濾器的服務器上：

$.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(); 
    }; 
});

當排序方法被調用，綁定到網格（數據）的陣列被重排，然後將柵格使用.render重新加載（）方法。爲了頁面，你必須有一個所有數據的數組和一個顯示數據的數組。

他確實有一個分頁here的例子，但作爲JavaScript的業餘愛好者，我很難跟隨。

來源

2010-11-16 20:25:41 ryanw51

謝謝。我開始研究更適合的jqGrid。這是一種恥辱，因爲我非常喜歡它看起來很強大的slickGrid的外觀。 – lloydphillips 2010-11-23 20:47:25

這困擾了我而過，直到我得到了下面的代碼工作：

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(); 
});

來源

2011-02-02 08:02:30 crwtylerwa

歡迎來到StackOverflow！你可以添加一些文字來解釋你的代碼片段嗎？ :) – asteri 2012-11-30 17:26:39

有一個在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"));

你也想要在你的頁面上的某個地方渲染它。

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

來源

2011-06-01 15:16:44 JensenDied

還可以查看關於如何檢索選定數據塊的AJAX加載示例[http://mleibman.github.com/SlickGrid/examples/example6-ajax-loading.html](http://mleibman.github。 COM/SlickGrid /示例/ example6-Ajax的loading.html） – 2012-03-23 14:41:00

//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 
    },

在上面設置分揀機

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]); 
}

來源

2011-08-25 21:19:55 James

我寫了一個尋呼機插件，該 SlickGrid增強尋呼機，使得SlickGrid分頁使用容易得多。它完全支持json。請在github上看到這個project。

來源

2012-10-01 07:40:14 KingleeMa

可以滑動頁面並顯示json

回答

相關問題