jQuery.Ajax 経由で JSON としてデータを取得しようとするときに SlickGrid を使用する方法の簡単な例を探しています。また、SlickGrid プラグインのドキュメントを見つけることができず、間違った場所を探しているだけなのだろうかと思っていました。SlickGrid を使い始めるための助けをいただければ幸いです。
5431 次
2 に答える
2
私は ajax 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
于 2013-03-11T10:51:11.450 に答える