如何向绑定到MemoryStore的EnhancedGrid添加一个空白/空行 [英] How to add a blank/empty row to the EnhancedGrid which is binded to MemoryStore
问题描述
Javascript：
require（['dojo / _base / lang'，'dojox / grid / EnhancedGrid'，'dojo / data / ItemFileWriteStore'，'dijit / form / Button'，'dojo / dom' dojo / domReady！'，'dojo / store / Memory'，'dojo / store / Observable'，'dojo / data / ObjectStore']，
函数（lang，EnhancedGrid，ItemFileWriteStore，Button，dom ，domReady，Memory，Observable，ObjectStore）{
/ *设置数据存储* /
var data = {
标识符：id，
项：[]
var gridMemStore = new Memory（{data：data}）;
var gridDataStore = Observable（gridMemStore）;
var store = new ObjectStore （{objectStore：gridDataStore}）;
/ *设置布局* /
var layout = [
[{
'name'列1'，
'field'：'id'，
'width'：'100px'
}，{
'name'：'Column 2'，
'field'：'col2'，
'width'：'100px'，
editable：true
$，
'name'：'Column 3'，
'field'：'col3'，
'width'：'200px'，
editable：true
}，{
'name'：'Column 4'，
'field'：'col4'，
'width'：'150px'
}]
];
/ *创建一个新网格* /
var grid = new EnhancedGrid（{
id：'grid'，
store：store，
items ：data.items，
structure：layout，
rowSelector：'20px'
}）;
/ *将新网格附加到div * /
grid.placeAt（gridDiv）;
/ *调用startup（）来渲染网格* /
grid.startup（）;
var id = 0;
var button = new Button（{
onClick：function（）{
console.log（arguments）;
grid.store.newItem（{
id：id
}）;
id ++;
}
}，addRow）;
}）;
HTML：
code>< body class =claro>
< div id =gridDiv>< / div>
< button id =addRowdata-dojo-type =dijit.form.Button>添加行< / button>
< / body>
请帮助我。这个代码中缺少什么？
如何添加一个空行，不管列数据类型如何？
在您发布的代码中，您需要删除dataGrid构造函数中的items参数，以使示例工作。以下是一个可能的解决方案：
要删除单元格中的...，请为每个字段使用自定义格式化程序，以避免未定义，使用get函数。文档 http://dojotoolkit.org/reference-guide/1.10/dojox/ grid / DataGrid.html
/ *设置布局* /
var layout = [
[{
'name'：'列1'，
'field'：'id'，
'width'：'100px'
}，{
'name'：'列2'，
'field'：'col2'，
'width'：'100px'，
editable：true，
formatter：function item）{
return'';
}，
get：function（rowIdx，item）{
return'';
}
}，{
'name'：'Column 3'，
'field'：'col3'，
'width'：'200px'，
editable：true，
formatter：function（item）{
return'';
}，
get：function（rowIdx，item）{
return'';
}
}，{
'name'：'列4'，
'field'：'col4'，
'width'：'150px'
}]
];
I am using MemoryStore, Observable and ObjectStore to bind the data to EnhancedGrid. But when add a row to EnhancedGrid, the newly added row cells are shown with (...). When i try to edit the cell, it displays undefined and ended with an exception.
Javascript:
require(['dojo/_base/lang', 'dojox/grid/EnhancedGrid', 'dojo/data/ItemFileWriteStore', 'dijit/form/Button', 'dojo/dom', 'dojo/domReady!', 'dojo/store/Memory', 'dojo/store/Observable', 'dojo/data/ObjectStore'],
function (lang, EnhancedGrid, ItemFileWriteStore, Button, dom, domReady, Memory, Observable, ObjectStore) {
/*set up data store*/
var data = {
identifier: "id",
items: []
};
var gridMemStore = new Memory({ data: data });
var gridDataStore = Observable(gridMemStore);
var store = new ObjectStore({ objectStore: gridDataStore });
/*set up layout*/
var layout = [
[{
'name': 'Column 1',
'field': 'id',
'width': '100px'
}, {
'name': 'Column 2',
'field': 'col2',
'width': '100px',
editable: true
}, {
'name': 'Column 3',
'field': 'col3',
'width': '200px',
editable: true
}, {
'name': 'Column 4',
'field': 'col4',
'width': '150px'
}]
];
/*create a new grid*/
var grid = new EnhancedGrid({
id: 'grid',
store: store,
items: data.items,
structure: layout,
rowSelector: '20px'
});
/*append the new grid to the div*/
grid.placeAt("gridDiv");
/*Call startup() to render the grid*/
grid.startup();
var id = 0;
var button = new Button({
onClick: function () {
console.log(arguments);
grid.store.newItem({
id: id
});
id++;
}
}, "addRow");
});
HTML:
<body class="claro">
<div id="gridDiv"></div>
<button id="addRow" data-dojo-type="dijit.form.Button">Add Row</button>
</body>
Please help me. What is missing in this code?
How to add an empty row irrespective of the column datatype?
In you posted code you need to remove the items argument in the dataGrid constructor for the example to work. Here is a possible solution:
To remove the ... in the cells use a custom formatter for the each field, to avoid the undefined, use the get function. Documentation http://dojotoolkit.org/reference-guide/1.10/dojox/grid/DataGrid.html
/*set up layout*/
var layout = [
[{
'name': 'Column 1',
'field': 'id',
'width': '100px'
}, {
'name': 'Column 2',
'field': 'col2',
'width': '100px',
editable: true,
formatter: function (item) {
return '';
},
get: function (rowIdx, item) {
return '';
}
}, {
'name': 'Column 3',
'field': 'col3',
'width': '200px',
editable: true,
formatter: function (item) {
return '';
},
get: function (rowIdx, item) {
return '';
}
}, {
'name': 'Column 4',
'field': 'col4',
'width': '150px'
}]
];
这篇关于如何向绑定到MemoryStore的EnhancedGrid添加一个空白/空行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
