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 

添加和删除数据

如果你想以编程方式添加（删除）的数据，你就必须从基础数据存储区中添加（删除）它。由于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教程有更多的信息和例子。