dojo - 如何在道场网格单元中添加多个按钮

Question

我是 dojo 的新手，我正在尝试将一些按钮放入数据网格单元格中。我阅读了文档并成功使用格式化程序将一个按钮放入网格中：

{
    name: "oper",
    field: "id",
    type: dojox.grid.cells._Widget,
    editable: false,
    formatter: function(id){
        return new Button({
            label:"oper",
            onClick: function(){
                    oper(id);
            }
        });
    }

}

我的问题是如何将两个或两个以上的按钮放入单元格中。非常感谢。

Answer 1

这是关于dojo Datagrids 的一个经常性问题。这里的主要问题是行格式化程序通常返回 dijit 小部件或 html。我找到并测试了一种简单的方法来克服这个问题。
1. 为您的小部件创建您的 div 持有人。例如 var holderDiv = dojo.toDom("");
2. 动态创建你的 wigets 例如 var editBtn = new dijit.form.Button({...});
var saveBtn = new dijit.form.Button({...});
var deleteBtn = new dijit.form.Button({...});
3. 将您的小部件放在持有人 div 中。
4.返回持有人div的innerHtml。

        **Hier is the full code:**
        function controlBtnsFormatter(data, rowIndex) {
            var holderDiv = dojo.toDom("<div></div>");
            var editBtn = new dijit.form.Button({...});
            var saveBtn = new dijit.form.Button({...});
            var deleteBtn = new dijit.form.Button({...});
            // destroy them on remove
            editBtn._destroyOnRemove = true;
            saveBtn._destroyOnRemove = true;
            deleteBtn._destroyOnRemove = true;
            // place buttons inside div
            editBtn.placeAt(holderDiv);
            saveBtn.placeAt(holderDiv);
            deleteBtn.placeAt(holderDiv);

            return holderDiv.innerHTML;

        }

Answer 2

在您的格式化程序函数中，创建一个 div 并将所有按钮添加到您的 div 中并返回创建的 div

formatter: function(id){
    var result = "<div>"
    //add all your buttons in the div, you can also apply some styles

    result += "</div>";
}

Answer 3

更好的解决方案是使用 dijit.form.Form 小部件来包围按钮：

            require(['dojo/_base/lang', 'dojo/dom', 'dijit/form/Button', 'dijit/form/Form', 'dojo/domReady!'],
               function(lang, dom, Button, Form){

                function formatter(){

                    var form = new Form();
                    var w1 = new Button({
                        label: "Edit",
                        onClick: function() {
                            alert("Thanks for all the fish.  ");
                        }
                    });

                    var w2 = new Button({
                        label: "Delete",
                        onClick: function() {
                            alert("Thanks for all the fish 2.  ");
                        }
                    });

                    w1._destroyOnRemove = true;
                    w2._destroyOnRemove = true;

                    w1.placeAt(form);
                    w2.placeAt(form);

                    return form;
                } .....