将表添加到我的dojo代码中

Add table to my dojo code

本文关键字：dojo 代码 我的 添加      更新时间：2023-09-26

我有一个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()
});

如果你的表行是固定的，即5行，那么你可以做一件简单的事情，创建一个html文件，它有5行的表，并在对话框中调用该文件。

popup = new dijit.Dialog({
    title: "Non-Spatial Permanent Feature Deductions...",
    style: "width: 750px; height: 400px", 
    href:"table.html" 
 });

当我需要一个包含大量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();
相关文章：