我正在使用相当不错的javascript库Recline http://okfnlabs.org/recline/它是围绕Backbone构建的。它还使用SlickGrid。
有很多例子,当然也有源代码可供查看。我自己有很长的路要走 - 编写自己的后端并以流畅的视图显示数据。
但是,我在示例中找不到的一件事是如何将记录追加到数据集中。我想将动作绑定到一个按钮,所以我可以在数据集的末尾添加一个空记录,这样我就可以使用slickgrid视图来编辑数据。
我似乎能够添加记录的唯一方法是往返服务器,但我不想这样做,因为这将涉及必须发布有效数据,因为实际上我不喜欢我希望我的数据集中有空白行。我希望能够在实际通过REST将数据发布到服务器之前在浏览器客户端上添加几行。
目前代码看起来像这样。
$(document).ready(function() {
var dataset = new recline.Model.Dataset({
url: '/rest/monitors',
backend: 'restlet',
});
dataset.fetch().done(function(dataset) {
var $el = $('#mygrid');
var grid = new recline.View.SlickGrid({
model: dataset,
el: $el,
state: {
gridOptions: {editable: true,enableCellNavigation: true},
columnsEditor: [
{column: 'monitoruntil', editor: Slick.Editors.Date },
{column: 'enabled', editor: Slick.Editors.Checkbox },
{column: 'owneremail', editor: Slick.Editors.Text},
{column: 'normalinterval', editor: Slick.Editors.Text}
],
columnsWidth:[{column: 'owneremail', width: 100},{column: 'url', width: 300},{column: 'lastaccessed', width:100 }]
}
});
grid.visible = true;
grid.render();
//Bind Save Button to a function to save the dataset
$('#savebutton').bind('click', function() {
//alert($(this).text());
dataset.save();
});
});;
})
使用此代码,我只能编辑和保存随“restlet”后端一起提供的现有记录。
答案 0 :(得分:4)
它看起来你正在寻找dataset.records.add()
在开发者控制台中尝试here:
var dataset = new recline.Model.Dataset({
records: [
{id: 0, date: '2011-01-01', x: 1, y: 2, z: 3, country: 'DE', title: 'first', lat:52.56, lon:13.40},
{id: 1, date: '2011-01-01', x: 1, y: 2, z: 3, country: 'DE', title: 'first', lat:52.56, lon:13.40},
]
});
createExplorer(dataset);
var i=2;
setInterval(function() {dataset.records.add({id: i, date: '2011-01-01', x: 1, y: 2, z: 3, country: 'DE', title: 'first', lat:52.56, lon:13.40});i++;},2000);