0

我正在开发一个应用程序，用户可以在其中对多个数据模型（又名数据库表）执行 CRUD 操作。我正在使用 Dojo，我对这个dojox.grid模块非常满意。但是用户还需要添加记录，所以每个表都必须有一个添加对话框。

仅给定模型的数据结构，是否有生成 Dojo 网格和添加对话框的方法/模块？有点像 的structure参数dojox.grid，因此网格和添加对话框都具有相同的数据类型、默认值、约束等。当然我可以编写一个自定义小部件来做到这一点，但我正在寻找这里存在的东西。

4

1 回答 1

2

答案是，没有这样的模块。您需要构建一个派生对话框。

让我们看看需要什么；

  1. 当前网格
  2. 网格布局（单元格类型）
  3. 名称和标签（结构）

假设 pr-grid 定义了一个“添加内容”按钮，并且该按钮“知道”所述网格的 ID，则其 onClick 函数应在对话框中启动一个表单。

虽然有 dijit.form 小部件，但还有一系列预定义的cellTypes，位于dojox/grid/cells/_base.js. 让我们制作一个类型和小部件为 1to1 的地图：

    var map = [{
        type: 'dojox.grid.cells.Cell',
        dijit: 'dijit.form.TextBox'},
    {
        type: 'dojox.grid.cells.Bool',
        dijit: 'dijit.form.CheckBox'},
    {
        type: 'dojox.grid.cells.Select',
        dijit: 'dijit.form.Select'},
    {
        type: 'dojox.grid.cells.DateTextBox',
        dijit: 'dijit.form.DateTextBox'}
             ];

在我们的 addContents 函数中，我们将使用 dojox.grid.DataGrid 中的“可编辑”功能。当我们知道有这样的——当然还有一个函数 pr-cell 来生成 DOM。这是任何 cellType 中都存在的formatEditing函数。

  // for instance
  dojox.grid.cells.Select.prototype.formatEditing( /* value */ "", /* row */ -1);

唯一需要的是构建应在对话框中显示的内容 - 以下使用上述功能并提供适合 dijit 的标记以在 dijit.Dialog 中呈现。

function addContents(gridId) {
    var grid = dijit.byId(gridId);
    var contents = ['<form action="MySubmitUrl" data-dojo-type="dijit.form.Form"><table>'];
    dojo.forEach(grid.layout.cells, function(cell, idx) {
        var szHtml = cell.formatEditing("", -1);
        var dijitType = map.filter(function(e) {
            return e.type == cell.declaredClass;
        })[0].dijit;
        var name = grid.structure[0][idx].field;
        var label = grid.structure[0][idx].name;
        var elementMod = ' data-dojo-type="' + dijitType + '" id="' + name + '" name="' + name + '" ';
        contents.push('<tr><td>');
        contents.push('<label for="' + name + '">' + label + ': </label>');
        contents.push('</td><td>');
        contents.push(szHtml.replace(/^([^\ ]*)/, "$1" + elementMod));
        contents.push('</td></tr>');
    });
    contents.push('</table></form>');
    var dialog = new dijit.Dialog({
        content: contents.join("")
    });
    dialog.show();
}

内容很容易样式化，还应该提供一个提交/取消按钮，但我确定你明白了。运行示例

让我知道它是如何运行的（没有测试过组合框/日期时间类型）

于 2012-07-09T16:58:48.920 回答