如何在dojo.grid.DataGrid中使用不同的小部件創建列？

我不確定嘗試在dojo.grid.DataGrid的列中創建不同類型的單元格部件，如果我錯了，請糾正我的錯誤。如何在dojo.grid.DataGrid中使用不同的小部件創建列？

這是我的問題：我需要顯示並讓用戶編輯一組鍵值對，所以我選擇DataGrid來做到這一點。關鍵很簡單，它們都是字符串，但是根據一定的關鍵值不同。其中一些具有「1-100」範圍，其中一些僅具有「真/假」值的開關，其中一些具有「easy/middle/hard」等幾個值。

所以我認爲對於不同類型的值，我應該使用不同的小部件來表示用戶可以執行的某些操作。對於第一個，當值被改變時，我使用帶有一些值檢查的文本區域。第二個我應該使用複選框，第三個我應該使用組合框。

在閱讀了一些官方的dojo 1.7文檔後，我發現dojo.grid.DataGrid沒有提供直接的方法來做我想做的事，DataGrid假設一列中的單元格應該具有相同的類型。任何人都可以幫我解決這個問題嗎？給我看一些示例代碼給我一個方向。謝謝！我還在談論另一種解決方案，「價值」列中的單元格全部是文本區域，單擊時，會彈出一個窗口，其上顯示正確的窗口小部件，並在那裏更改值。任何人都可以告訴我這種方式是否更容易實現？

謝謝！
克里斯

使用格式化代碼：

<!DOCTYPE HTML> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>test different widgets in one column</title> 
    <link rel="stylesheet" href="lib/1.7.2/dojo/resources/dojo.css"> 
    <link rel="stylesheet" href="lib/1.7.2/dijit/themes/claro/claro.css"> 
    <link rel="stylesheet" href="lib/1.7.2/dojox/grid/resources/Grid.css"> 
    <link rel="stylesheet" href="lib/1.7.2/dojox/grid/resources/claroGrid.css"> 

    <!-- <link rel="stylesheet" href="style.css" media="screen"> 
    <link rel="stylesheet" href="../../../resources/style/demo.css" media="screen"> --> 
    <!-- load dojo and provide config via data attribute --> 
    <script src="lib/1.7.2/dojo/dojo.js" 
     data-dojo-config="isDebug: true, async: true"> 
    </script> 
    <script> 

     var grid, dataStore; 
     require(["dojox/grid/DataGrid", 
       "dojo/store/Memory", 
       "dojo/data/ObjectStore", 
       "dojo/_base/xhr", 
       "dojo/domReady!", 
       "dijit/form/Button", 
       "dijit/form/ComboButton", 
       "dijit/Menu", 
       "dijit/MenuItem", 
       "dojox/grid/cells/dijit", 
       "dijit/form/ComboBox", 
       "dijit/form/ValidationTextBox" 
       ], function(DataGrid, Memory, ObjectStore, xhr, Button, ComboButton, Menu, MenuItem, ComboBox, ValidationTextBox) { 
       var gridCellsDijit = dojox.grid.cells; 

      xhr.get({ 
       url: "jsondata", 
       handleAs: "json" 
      }).then(function(data){ 
        dataStore = new ObjectStore({ objectStore:new Memory({ data: data.items }) }); 

        grid = new DataGrid({ 
        store: dataStore, 
        query: { id: "*" }, 
        escapeHTMLInData : false, 
        structure: [ 

         { 
          name: "Setting Name", field: "setting_name", width: "50%", editable : false 
         }, 

         { 
          name: "value", field: "_item", width: "50%", type: dojox.grid.cells._Widget, editable: false, 
          formatter: function(item, rowIndex, cell){ 
           var store = cell.grid.store; 
           if (store.getValue(item, 'type') == 'enum') { 
            var stateStore = new Memory({ 
              data: [ 
               {name:"setting1", id:"1"}, 
               {name:"setting2", id:"2"}, 
               {name:"setting3", id:"3"}, 
              ] 
             }); 

            var comboBox = new dijit.form.ComboBox({ 
               name: "state", 
               value: "setting1", 
               store: stateStore, 
               searchAttr: "name" 
              }); 
            return comboBox; 

           } 
           else { 
            var tb = new dijit.form.ValidationTextBox({promptMessage:'testtest'}); 
            return tb; 
           } 

          } 
          } 
         ] 
       }, "grid"); 

       grid.startup(); 
      }); 
     }); 
    </script> 
</head> 
<body class="claro"> 
    <h1>test different widgets in one column</h1> 

    <br/> 
    <div id="grid"></div> 
</body>

JSON數據樣本是這樣的：

{ 
"items": [ 
    { 
     "setting_name": "setting1", 
     "value": "YES", 
     "type":"enum", 
     "candidates" : ["YES", "NO"] 

    }, 
    { 
     "setting_name": "setting2", 
     "value": "Disable", 
     "type":"enum", 
     "candidates" : ["Disable", "Enable"] 

    } , 
    { 
     "setting_name": "setting3", 
     "value": "19200", 
     "type":"enum", 
     "candidates" : ["9600", "19200", "38400", "57600"] 
    }, 
    { 
     "setting_name": "setting4", 
     "value": "25", 
     "type":"decimal", 
     "min" : "1", 
     "max" : "99" 
    }, 
    { 
     "setting_name": "setting5", 
     "value": "1A", 
     "type":"hex", 
     "min" :"0" , 
     "max" :"FF" 
    } 
    ]

}

來源

2012-06-25 user1478888

您可以使用格式化或get函數要做到這一點。根據您的值，然後顯示一種類型的dijit。我不確定它會起作用，但我認爲格式化程序可能仍會在格式化程序中更改或獲取觸發。

來源

2012-06-25 09:07:23 PEM

嗨，謝謝！我寫了一個示例代碼來嘗試格式化程序，但我無法實現它的工作。一個錯誤報告說，使用ValicationTextBox的方式是錯誤的，我會嘗試修復它。但即使沒有這個，我仍然無法正確顯示Combobox，有什麼建議嗎？ – user1478888

哦，我修好了。我應該寫dijit.form.Combobox不只是Combobox，UI現在應該沒問題，謝謝PEM！下一步，我會嘗試處理事件和數據，快速地，我不會遇到更多的麻煩！ – user1478888

如果你有更多的問題，你也可以去irc freenode上的#dojo頻道:)很高興我可以幫助你！不要忘記驗證答案:) – PEM

如何在dojo.grid.DataGrid中使用不同的小部件創建列？

回答

相關問題