dojo.grid.DataGrid の列にさまざまな種類のセルのウィジェットを作成しようとするのが良い考えかどうかはわかりません。間違っている場合は修正してください。
これが私の問題です。キーと値のペアのセットを表示して、ユーザーが編集できるようにする必要があるため、DataGrid を選択して実行します。キーは単純で、すべて文字列ですが、特定のキーによって値が異なります。それらのいくつかは「1-100」のような範囲を持ち、いくつかは「真/偽」の値を持つスイッチのみであり、いくつかは「簡単/中/難しい」のように選択するいくつかの値があります.
したがって、さまざまなタイプの値について、ユーザーが実行できる特定の操作を表すために別のウィジェットを使用する必要があると思います。1 つ目は、値が変更されたときに値をチェックするテキスト アエラを使用します。2 番目はチェックボックスを使用し、3 番目はコンボボックスを使用します。
公式の dojo 1.7 ドキュメントを読んだ後、dojo.grid.DataGrid によって提供される直接的な方法がないことがわかりました。DataGrid は、1 つの列のセルが同じ型である必要があると想定しています。誰でもこの問題について私を助けることができますか? 方向性を示すために、サンプル コードをいくつか示してください。ありがとう！私は別の解決策についても考えています。「値」列のセルはすべてテキストです。クリックすると、ポップアップウィンドウが表示され、正しいウィジェットが表示され、そこで値を変更します。この方法の方が実装が簡単かどうか、誰か教えてもらえますか?
ありがとう！
クリス
フォーマッタ コードの使用:
<!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"
}
]
}