【发布时间】：2012-06-26 07:52:47
【问题描述】：
我不确定尝试在 dojo.grid.DataGrid 的列中创建不同类型的单元格小部件是否是个好主意，如果我错了，请纠正我。
这是我的问题：我需要显示并让用户编辑一组键值对，所以我选择 DataGrid 来做。 key很简单，都是字符串，只是根据某个key值不同。其中一些具有“1-100”之类的范围，其中一些只是具有“真/假”值的开关，其中一些具有多个值可供选择，例如“简单/中/硬”。
所以我认为对于不同类型的值，我应该使用不同的小部件来表示用户可以执行的某些操作。对于第一个，我在值更改时使用带有一些值检查的文本 aera。第二个我应该使用复选框，第三个我应该使用组合框。
在阅读了一些官方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"
}
]
}
【问题讨论】：
标签： javascript datagrid dojo