如何在一个dojo网格单元格中添加多个按钮

5fjcxozz  于 2022-12-16  发布在  Dojo
关注(0)|答案(3)|浏览(151)

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

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

}
我的问题是如何把两个或两个以上的按钮放进电池里。非常感谢。

wkftcu5l

wkftcu5l1#

在formatter函数中,创建一个div,并将所有按钮添加到div中,然后返回创建的div

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

    result += "</div>";
}
iezvtpos

iezvtpos2#

一个更好的解决方案是使用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;
                } .....
w3nuxt5m

w3nuxt5m3#

这是一个关于Dojo Datagrid的反复出现的问题。2这里的主要问题是行格式化器通常返回一个dijit小部件或html。3我已经找到并测试了一个简单的方法来克服这个问题。
1.为你的小部件创建一个div保持器,例如var holderDiv = dojo.toDom(“”);
2.动态创建你的wigets,例如var editBtn = new dijit.form.Button({...});
var saveBtn =新建dijit表单按钮({...});
var deleteBtn =新建dijit表单按钮({...});
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;

        }

相关问题