创建Dojo网格并从数据模型添加对话框

Question

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

是否有一种方法/模块可以生成Dojo网格和Add Dialog，只给出模型的数据结构？有点像structure的dojox.grid参数，这样网格和add对话框都有相同的数据类型、默认值、约束等等。当然，我可以编写一个定制的小部件来完成这个任务，但是我在这里寻找一些存在的东西。

Answer 1

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

让我们看看需要什么；

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

假设有一个“添加内容”按钮定义了pr网格，并且该按钮“知道”该网格的ID，则它的onClick函数应该在对话框中激发一个表单。

虽然有dijit.form小部件，但也有一系列预定义的cellTypes，驻留在dojox/grid/cells/_base.js下。让我们绘制一个类型和小部件为1到1的地图：

    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-单元来生成DOM。这是formatEditing函数，它存在于任何cellType中。

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

唯一需要的是构造应该在对话框中显示的内容--下面使用上述功能，并为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();
}

内容是容易风格的，也应该提供一个提交/取消按钮，但我肯定你有这个想法。运行样本

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