dojo dstore插入行

Question

有人可以帮助我在DGRID中插入一行吗？我现在使用的方法是克隆一行，使用指令将其添加到集合中，然后尝试将其应用于网格。下面是我正在使用的代码，但新行最终被添加到底部，而不是插入。

// Clone a row

theTable = tmxdijit.registry.byId(tableName);

firstRow = theTable.collection.data[theTable.collection.data.length-1];

firstRowDom = theTable.row(firstRow.id);

var cloneRow = json.stringify(firstRow);

cloneRow = json.parse(cloneRow);

// Get the row I want to add before

var theSelected = Object.keys(theTable.selection)[0];

if(theSelected.length > 0) {

    var theRowID = theSelected[0];

}

theTable.collection.add(cloneRow, {beforeId: theRowID});

theTable.renderArray([cloneRow]);

Answer 1

相反，为什么不直接将数据添加到网格存储中呢？看看这是否有帮助

https://dojotoolkit.org/reference-guide/1.10/dojox/grid/example_Adding_and_deleting_data.html

添加和删除data

如果要以编程方式添加(删除)数据，只需从基础数据存储中添加(删除)数据即可。由于DataGrid为“DataStoreAware”，因此对存储所做的更改将自动反映在DataGrid中。

dojo.require("dojox.grid.DataGrid");
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dijit.form.Button");

。

<div>
    This example shows, how to add/remove rows
</div>

<table data-dojo-type="dojox.grid.DataGrid"
    data-dojo-id="grid5"
    data-dojo-props="store:store3,
    query:{ name: '*' },
    rowsPerPage:20,
    clientSort:true,
    rowSelector:'20px'
    style="width: 400px; height: 200px;">
    <thead>
        <tr>
            <th width="200px"
                field="name">Country/Continent Name</th>
            <th width="auto"
                field="type"
                cellType="dojox.grid.cells.Select"
                options="country,city,continent"
                editable="true">Type</th>
        </tr>
    </thead>
</table>

<div data-dojo-type="dijit.form.Button">
    Add Row
    <script type="dojo/method" data-dojo-event="onClick" data-dojo-args="evt">
        // set the properties for the new item:
        var myNewItem = {type: "country", name: "Fill this country name"};
        // Insert the new item into the store:
        // (we use store3 from the example above in this example)
        store3.newItem(myNewItem);
    </script>
</div>

<div data-dojo-type="dijit.form.Button">
    Remove Selected Rows
    <script type="dojo/method" data-dojo-event="onClick" data-dojo-args="evt">
        // Get all selected items from the Grid:
        var items = grid5.selection.getSelected();
        if(items.length){
            // Iterate through the list of selected items.
            // The current item is available in the variable
            // "selectedItem" within the following function:
            dojo.forEach(items, function(selectedItem){
                if(selectedItem !== null){
                    // Delete the item from the data store:
                    store3.deleteItem(selectedItem);
                } // end if
            }); // end forEach
        } // end if
    </script>
</div>

。

@import "{{ baseUrl }}dijit/themes/nihilo/nihilo.css";
@import "{{ baseUrl }}dojox/grid/resources/nihiloGrid.css";

Answer 2

有两种处理数据插入的一般方法。一种方法是手动将数据添加到数组中，确保数据被正确排序，然后告诉网格呈现该数组。更好的方法是使用带有可跟踪存储的OnDemandGrid。

要让dgrid/dstore支持简单的动态插入行，请确保该存储是可跟踪的，并且数据项具有一些唯一的id属性：

var StoreClass = Memory.createSubclass(Trackable);
var store = new StoreClass({ data: whatever });
var grid = new OnDemandGrid({
    columns: { /* columns */ },
    collection: store
});

默认情况下，dstore假定id属性为"id"，但您可以指定其他值：

var store = new StoreClass({ idProperty: "name", data: whatever });

如果您希望对数据进行排序，一个简单的解决方案是在网格上设置一个排序(网格将使用给定的属性名称以升序对行进行排序)：

grid.set('sort', 'name');

要添加或删除数据，请使用存储方法put和remove。

var collection = grid.get('collection');
collection.put(/* a new data item */);
collection.remove(/* a data item id */);

网格将收到存储更新的通知，并将插入或删除行。

dgrid Using Grids and Stores教程有更多信息和示例。