2012-11-22 83 views
0

我是dojo的新手,我正在嘗試將一些按鈕放入datagrid單元格中。我閱讀文檔,併成功把一個按鈕到使用格式化電網:如何將多個按鈕添加到dojo網格單元

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

}

我的問題是如何把兩個或兩個以上的按鈕進入細胞。 Thx非常。

回答

0

在你的格式化功能,創建一個div並在DIV添加所有按鈕,返回創建DIV

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

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

這是關於道場DataGrid中反覆出現的問題。 這裏的主要問題是行格式化程序通常返回一個dijit小部件 或一個html。我發現並測試了一個簡單的方法來解決這個問題。
1.爲您的小部件創建您的div持有人。 E.g 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.返回holder 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; 

     } 
0

更好的解決方案是使用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; 
       } ..... 
相關問題