slick Gitter Beispiel mit ajax

Habe ich schriftlich eine ajax-slick-raster. Es ist gut gegangen, also seine definitiv eine Idee, die sich lohnt zu verfolgen.

Habe ich eine überspringen-nehmen Sie das Modell nach unten ziehen, eine große Menge von Daten in den Reihen. Ich schrieb auch einen wrapper Grid Klasse für die slick-grid-set-up und manipulation so war es einfacher zu verwenden.

Unten ist ein code, dass ich hoffen könnte Ihnen helfen, begonnen zu erhalten. Ich habe schneiden Sie es nach unten, um es spezifisch für Ihre AJAX-loading Frage. Die realen Netz nutzt Spalte filtern, und aktivieren Sie das Kontrollkästchen Selektoren, die beide auch eine Untersuchung Wert, würde aber verschleiern die Antwort.

Die syntax ist CoffeeScript, aber ich bin sicher, Sie bekommen die Idee.

SlickGrid Wrapper

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

Implementierung der Wrapper für ein User-Grid

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)

Die 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>

Einige SQL-geben Sie die Idee

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