Dojo数据存储插入行

jslywgbw  于 2022-12-16  发布在  Dojo
关注(0)|答案(2)|浏览(185)

有人能帮助我在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]);
yeotifhr

yeotifhr1#

处理数据插入的一般方法有两种。一种是手动将数据添加到数组,确保其正确排序,然后告诉网格呈现数组。一种更好的方法是使用具有可跟踪存储的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');

要添加或删除数据,请使用存储方法putremove

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

网格将收到存储更新的通知,并将插入或删除行。
dgrid Using Grids and Stores教程提供了更多信息和示例。

nnvyjq4y

nnvyjq4y2#

与此相反,为什么不直接将数据添加到网格存储中呢?

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

添加和删除数据

如果要以编程方式添加(删除)数据,则只需从基础数据存储区中添加(删除)数据。由于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";

相关问题