使用 ajax 的光滑网格示例答案

【问题标题】：slick grid example using ajax使用 ajax 的光滑网格示例
【发布时间】：2013-02-22 16:06:00
【问题描述】：

我正在寻找一个简单的示例，说明在尝试通过 jQuery.Ajax 以 JSon 形式检索数据时如何使用 SlickGrid。我也找不到 SlickGrid 插件的任何文档，并且想知道我是否只是在错误的地方寻找。任何帮助我开始使用 SlickGrid 的帮助将不胜感激。

【问题讨论】：

标签： javascript ajax gridview slickgrid

【解决方案1】：

我一直在写一个 ajax slick-grid。它进展顺利，所以它绝对是一个值得追求的想法。

我使用skip-take模型批量拉取大量数据。我还为 slick-grid 设置和操作编写了一个包装器 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

【讨论】：

【解决方案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。

查看 Pull Request 以了解更改的内容https://github.com/harbulot/SlickGrid/compare/mleibman:master...url_builder

【讨论】：