0

我有一个 dojo 对话框功能，并希望能够向其中添加一个包含 5 行的表。我怎样才能做到这一点？下面是我的代码。

dojo.require("dijit.Dialog");
    dojo.require("dijit.form.TextBox");
    dojo.require("dojox.grid.EnhancedGrid");
    dojo.addOnLoad(function() {
    popup = new dijit.Dialog({
    title: "Non-Spatial Permanent Feature Deductions...",
    style: "width: 750px; height: 400px", 
    content: "<input dojoType='dijit.form.Button' type='button' name='name' id='name' label='OK'>" 
 });
    popup.show()
});
4

2 回答 2

1

当我需要一个包含一堆 dijit 或自定义功能的对话框时，我最终会制作一个自定义对话框 dijit。这是我当前项目中的一个。

define([
    "dojo/_base/declare",
    "dijit/_Widget",
    "dijit/_TemplatedMixin",
    "dijit/_WidgetsInTemplateMixin",
    "dojo/i18n!magic/nls/common",
    "dojo/text!./templates/emrSelection.html",
    "dojo/dom-construct",
    "dojo/on",
    "dojo/Evented",
    "dojo/_base/connect",
    "dojo/query",
    "dojo/_base/lang",
    "dijit/Dialog",
    "dijit/form/CheckBox"
],
function (declare, _Widget, _TemplatedMixin, _WidgetsInTemplateMixin, i18n, template, domConstruct, on, Evented, connect, query, lang, Dialog, CheckBox) {

return declare("project.customDialog", [Dialog], {

    title: i18n.customDialog.title,
    emrIds: [],

    constructor: function(/*Object*/ kwArgs) {
        lang.mixin(this, kwArgs);

        var contentWidget = new (declare([_Widget, _TemplatedMixin, _WidgetsInTemplateMixin], {
            closeLabel: i18n.close,
            templateString: template,
            baseClass: "customDialog"

        }));
        contentWidget.startup();
        this.content = contentWidget;
    },

    postCreate: function() {
        this.inherited(arguments);
    },

    startup: function() {
        this.inherited(arguments);
        this._createTable();
    },

    _createTable : function() {
        var that = this;
        var i = 0;
        var tr = null;
        this.store.query().forEach(lang.hitch(this, function(emr){
            var state = that.emrIds.indexOf(emr.id) != -1;
            if(i++%3 == 0) {
                tr =  domConstruct.create("tr");
                domConstruct.place(tr, that.content.tableBody);
            }
            var td1c = domConstruct.create("td", {'class':"checkBox"}, tr);
            var td1l = domConstruct.create("td", {'class':"label"}, tr);
            var box = that._createCheckBox(emr.name, state, emr.id);
            domConstruct.place(box.domNode, td1c);
            domConstruct.place("<label for='checkbox'>"+emr.name+"</label>", td1l);
        }));
    },

    _createCheckBox : function(name, checked, id) {
        var box = CheckBox({
            name: name,
            value: name,
            checked: checked,
            emr_id: id,
            onChange: lang.hitch(this, function(state){
                var id = box.get('emr_id');
                var name = box.get('name');
                this.emit("tick", {emrId:id, name:name, state:state});
            })
        }, domConstruct.create("div"));
        box.startup();
        return box;
    }

});

模板

<div class="${baseClass}" data-dojo-attach-point="container" >
    <table>
        <tbody data-dojo-attach-point="tableBody"></tbody>
    </table>
    <div class="buttonContainer">
        <button class="button" data-dojo-type="dijit.form.Button" data-dojo-attach-point="saveButton">${closeLabel}</button>
    </div>
</div>

然后我调用它并使用 on() 从中获取事件。

        this.dialog = new emrSelection({store: this.emrStore, emrIds: this.emrIds});
        this.dialog.startup();
        this.dialog.show();
于 2013-08-02T22:05:08.700 回答
1

如果您的表格行是固定的，即 5，那么您可能会做一件简单的事情，即创建一个包含 5 行的表格并在对话框中调用该文件的 html 文件。

popup = new dijit.Dialog({
    title: "Non-Spatial Permanent Feature Deductions...",
    style: "width: 750px; height: 400px", 
    href:"table.html" 
 });
于 2013-08-05T06:25:46.823 回答