0

我正在使用 MemoryStore、Observable 和 ObjectStore 将数据绑定到 EnhancedGrid。但是当向 EnhancedGrid 添加一行时，新添加的行单元格会显示为 (...)。当我尝试编辑单元格时，它显示未定义并以异常结束。

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>

请帮我。这段代码缺少什么？

无论列数据类型如何，如何添加空行？

4

1 回答 1

1

在您发布的代码中，您需要删除 dataGrid 构造函数中的 items 参数才能使示例正常工作。这是一个可能的解决方案：

要删除单元格中的 ... ，请为每个字段使用自定义格式化程序，以避免未定义，请使用 get 函数。文档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'
                                }]
                        ];
于 2014-10-16T15:38:46.513 回答