使用AJAX的光滑網格示例

Question

我正在尋找一個簡單的例子，當試圖通過jQuery.Ajax檢索數據爲JSon時如何使用SlickGrid。我也無法找到任何SlickGrid插件的文檔，並想知道我是否只是看錯了地方。任何幫助讓我開始與SlickGrid將不勝感激。

Answer 1

我一直在寫一個ajax滑動網格。它進展順利，所以它絕對是一個值得追求的想法。

我使用了跳過模型來批量拉取大量數據。我還編寫了一個包裝類Grid，用於光滑網格設置和操作，因此更容易重用。

以下是我希望可以幫助您入門的一些代碼。我已經把它縮減爲特定於您的AJAX加載問題。真正的網格使用列篩選器和複選框選擇器，這兩者都值得研究，但會混淆回覆。

語法是CoffeeScript，但我相信你可以明白。

SlickGrid包裝

class Grid 
    grid = null 
    dataView = null 
    options = { 
     enableCellNavigation: true, 
     explicitInitialization: true 
    } 

    constructor:(@gridId, @pagerId, @columns, loadData)-> 
     @setupDataView() 
     @setupGrid() 
     @setupPager() 
     grid.init() 
     loadData() 

    setupDataView:() -> 
     dataView = new Slick.Data.DataView() 
     dataView.onRowCountChanged.subscribe(-> 
      grid.updateRowCount() 
      grid.render() 
     ) 
     dataView.onRowsChanged.subscribe((e, args)-> 
      grid.invalidateRows(args.rows) 
      grid.render() 
     ) 

    setupGrid:()-> 
     grid = new Slick.Grid(@gridId, dataView, @columns, options) 
     grid.setSelectionModel(new Slick.RowSelectionModel()) 

    setupPager:() -> 
     dataView.setPagingOptions({ pageSize: 25 }); 
     pager = new Slick.Controls.Pager(dataView, grid, $(@pagerId)); 

    addRows:(rows)-> 
     dataView.beginUpdate() 
     dataView.addItem row for row in rows 
     dataView.endUpdate() 

用於用戶網格

viewdata = $('#viewdata').data('viewdata') 
take = 800 
grid = null 
loadingGlyph = '<img class="loading" style="float:right;margin-top:5px" src="/Content/img/ajax-loader.gif" alt="loading" width="16" height="16"/>' 

columns = [ 
    { id: 'last name', name: 'Last Name', field: 'LastName', sortable:true }, 
    { id: 'first name', name: 'First Name', field: 'FirstName', sortable:true }, 
    { id: 'email', name: 'Email', field: 'Email', sortable:true } 
] 

loadData=() => 
    $('.slick-pager-status').after(loadingGlyph) 
    for skip in [0..viewdata.count] by take 
     url = '/' + viewdata.id + '/users/' + skip + '/' + take 
     $.getJSON(url, (users) -> 
      grid.addRows(users) 
      $('.loading').hide() if users.length < take 
     ) 

$ -> 
    grid = new Grid('#user-grid', '#user-pager', columns, loadData) 

的HTML實施包裝

<div style="margin: 10px;"> 
    <div id="user-grid" style="width: 100%; height: 700px;"></div> 
    <div id="user-pager" style="width: 100%; height: 20px;"></div> 
</div> 

一些SQL給你的想法

select * from 
(
    select Id, FirstName, LastName, Email, ROW_NUMBER() over (order by UserName) rownum 
    from [.. your stuff] 
    where [... your stuff] 
) seq 
where seq.rownum between @skip and @count 

Answer 2

對於其他人要做到這一點看看slickgrid的這個分支。 https://github.com/harbulot/SlickGrid

它增加了一個漂亮的小Python的服務器提供AJAX後端

git clone git@github.com:harbulot/SlickGrid.git 
cd SlickGrid/ 
python localajaxserver.py 

然後去http://127.0.0.1:8000/examples/example6b-ajax-localserver.html與您的瀏覽器。

看拉請求看看發生了什麼變化https://github.com/harbulot/SlickGrid/compare/mleibman:master...url_builder