Javascript 使用ajax的光滑网格示例
我正在寻找一个简单的示例,介绍如何在试图通过jQuery.Ajax以JSon的形式检索数据时使用SlickGrid。我也找不到任何关于SlickGrid插件的文档,我想知道我是不是找错地方了。如果您能帮助我开始使用SlickGrid,我将不胜感激。我一直在编写ajax slick grid。它进展顺利,所以这绝对是一个值得追求的想法 我使用了一个skip-take模型来批量提取大量数据。我还为光滑的网格设置和操作编写了一个包装器Javascript 使用ajax的光滑网格示例,javascript,ajax,gridview,slickgrid,Javascript,Ajax,Gridview,Slickgrid,我正在寻找一个简单的示例,介绍如何在试图通过jQuery.Ajax以JSon的形式检索数据时使用SlickGrid。我也找不到任何关于SlickGrid插件的文档,我想知道我是不是找错地方了。如果您能帮助我开始使用SlickGrid,我将不胜感激。我一直在编写ajax slick grid。它进展顺利,所以这绝对是一个值得追求的想法 我使用了一个skip-take模型来批量提取大量数据。我还为光滑的网格设置和操作编写了一个包装器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)
如果有人想做这件事,请检查一下这个光滑的网格叉 它添加了一个很好的本地Python服务器来提供AJAX后端
git clone git@github.com:harbulot/SlickGrid.git
cd SlickGrid/
python localajaxserver.py
然后转到http://127.0.0.1:8000/examples/example6b-使用浏览器访问ajaxlocalserver.html
查看Pull请求以查看更改了什么
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
git clone git@github.com:harbulot/SlickGrid.git
cd SlickGrid/
python localajaxserver.py