如何使 setItems 在 SlickGrid 中正常工作？

Question

我有这个简单的代码：

var columnsTest = [ 
    {id: "testId", name: "ID", field: "id", width: 50},
    {id: "field1", name: "field1", field: "field1", width: 200},
    {id: "field2", name: "field2", field: "field2", width: 200}
]

function saveTest() {
    var itemFields = [];
    itemFields = dataViewTest.getItemById( dataViewTest.getItem(gridTest.getSelectedRows()).id );

    itemFields['field1'] =  $('#field1').val();
    itemFields['field2'] =  $('#field2').val(); 

    var data = JSON.stringify(itemFields);
    console.log("data: " + data);
    dataViewTest.beginUpdate();
    dataViewTest.setItems(itemFields, "id");
    dataViewTest.endUpdate();   
    dataViewTest.refresh(); 
}

$(function() {
    dialogTest = $( "#test_form" ).dialog({
        autoOpen: false,
        height: 480,
        width: 600,
        modal: true,
        buttons: {
            "Save": function() { saveTest(); },
            "Cancel": function() { dialogCustomer.dialog( "close" ); }
        }
    });

    dataViewTest = new Slick.Data.DataView({ inlineFilters: true });

    gridTest = new Slick.Grid($("#test_grid"), dataViewTest, columnsTest, optionsTest);
    gridTest.setSelectionModel(new Slick.RowSelectionModel());
    gridTest.registerPlugin( new Slick.AutoTooltips({ enableForHeaderCells: true }) );
    pagerTest = new Slick.Controls.Pager(dataViewTest, gridTest, $("#test_pager"));

    dataViewTest.onRowsChanged.subscribe(function (e, args) {
      gridTest.invalidateRows(args.rows);
      gridTest.render();
    });         

    $( "#add_test" ).button().on('click', function() {
        dialogTest.dialog("option", "title", "Create New");
        dialogTest.dialog( "open" );
    }); 
});

我在 console.log 中的位置：

data: {"id":"187","field1":"aaaaaaa","field2":"bbbbbbb"}

但是当我尝试保存控制台时，控制台一直说：“未捕获的每个数据元素都必须实现一个唯一的 'id' 属性”......我会错过什么吗？ 虽然我有那个 id 属性，甚至传递给 setItems 的那个 objectIdProperty 可选参数...

提前致谢！ 干杯! 路易吉

Answer 1

我不确定你的函数之前是如何部分工作的，因为gridTest.getSelectedRows() 返回一个数组，因此dataViewTest.getItem(selectedRows) 应该会出错。此外，由于您似乎只想更新单个项目，因此您不会调用dataViewTest.setItems()，因为这是用于同时更新多个项目并获取对象/行/项目的数组，而不仅仅是一个。这可能就是你想要的：

function saveTest() {
    var rows = gridTest.getSelectedRows(); // array of row indices: [5,8,21,42]
    var item = gridTest.getDataItem(rows[0]); // get the actual data item for the first selected row

    // update the properties for the item
    item.field1 = $('#field1').val();
    item.field2 = $('#field2').val(); 

    console.log("data:", item);

    // tell your dataview to update the item
    dataViewTest.updateItem(item.id, item);
}