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教程有更多的信息和例子。