Dojo - 如何在我的 DataGrid 中添加复选框作为列
Dojo - How can I add checkbox as a column in my DataGrid
我只是道场的新手。我有一个数据网格(我只是在另一个教程中复制粘贴),我需要的是一个复选框作为这个数据网格中的一列。我怎样才能做到这一点?在此先感谢您的帮助。
下面是我的完整 html 代码:
<!DOCTYPE html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<link rel="stylesheet"
href="http://ajax.googleapis.com/ajax/libs/dojo/1.7/dijit/themes/claro/claro.css">
@import "js/dojo/dojox/grid/resources/claroGrid.css";
/*Grid needs an explicit height by default*/
#gridDiv
{
left: 500px;
width: 600px;
height: 20em;
margin-left: 200px;
margin-top: 100px;
padding: 10px 10px 10px 10px;
border:3px solid black;
}
#progButtonNode
{
position: relative;
}
</style>
<script>dojoConfig = {async: true, parseOnLoad: false}</script>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7/dojo/dojo.js">
</script>
<SCRIPT SRC="js/requiredDojo.js" type="text/javascript"></SCRIPT>
<script>
var grid;
require(['dojo/_base/lang', 'dojox/grid/DataGrid', 'dojo/data/ItemFileWriteStore', 'dojo/dom', 'dojo/domReady!'],
function(lang, DataGrid, ItemFileWriteStore, dom){
/*set up data store*/
var data = {
identifier: "id",
items: []
};
var data_list = [
{ col1: "normal", col2: false, col3: 'But are not followed by two hexadecimal', col4: 29.91},
{ col1: "important", col2: false, col3: 'Because a % sign always indicates', col4: 9.33},
{ col1: "important", col2: false, col3: 'Signs can be selectively', col4: 19.34}
];
var rows = 60;
for(var i = 0, l = data_list.length; i < rows; i++){
data.items.push(lang.mixin({ id: i+1 }, data_list[i%l]));
}
var store = new ItemFileWriteStore({data: data});
/*set up layout*/
var layout = [[
{'name': 'NAME', 'field': 'id', 'width': '150px'},
{'name': 'DESC', 'field': 'col2', 'width': '150px'},
{'name': 'CODE', 'field': 'col3', 'width': '150px'},
{'name': 'IS ENABLE', 'field': 'col4', 'width': '150px'}
]];
/*create a new grid*/
grid = new dojox.grid.DataGrid({
id: 'grid',
store: store,
structure: layout,
rowSelector: '20px'});
/*append the new grid to the div*/
grid.placeAt("gridDiv");
/*Call startup() to render the grid*/
grid.startup();
});
</script>
</head>
<body class="claro">
<div id="gridDiv"></div>
</body>
</html>
尝试
{
'name': 'NAME', 'field': 'id', 'width': '150px',
type: dojox.grid.cells.Bool, editable: true
}
您可以找到更多详细信息@
http://dojotoolkit.org/reference-guide/1.9/dojox/grid/DataGrid.html#editing-cells
我只是道场的新手。我有一个数据网格(我只是在另一个教程中复制粘贴),我需要的是一个复选框作为这个数据网格中的一列。我怎样才能做到这一点?在此先感谢您的帮助。
下面是我的完整 html 代码:
<!DOCTYPE html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<link rel="stylesheet"
href="http://ajax.googleapis.com/ajax/libs/dojo/1.7/dijit/themes/claro/claro.css"> @import "js/dojo/dojox/grid/resources/claroGrid.css";
/*Grid needs an explicit height by default*/
#gridDiv
{
left: 500px;
width: 600px;
height: 20em;
margin-left: 200px;
margin-top: 100px;
padding: 10px 10px 10px 10px;
border:3px solid black;
}
#progButtonNode
{
position: relative;
}
</style>
<script>dojoConfig = {async: true, parseOnLoad: false}</script>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7/dojo/dojo.js">
</script>
<SCRIPT SRC="js/requiredDojo.js" type="text/javascript"></SCRIPT>
<script>
var grid;
require(['dojo/_base/lang', 'dojox/grid/DataGrid', 'dojo/data/ItemFileWriteStore', 'dojo/dom', 'dojo/domReady!'],
function(lang, DataGrid, ItemFileWriteStore, dom){
/*set up data store*/
var data = {
identifier: "id",
items: []
};
var data_list = [
{ col1: "normal", col2: false, col3: 'But are not followed by two hexadecimal', col4: 29.91},
{ col1: "important", col2: false, col3: 'Because a % sign always indicates', col4: 9.33},
{ col1: "important", col2: false, col3: 'Signs can be selectively', col4: 19.34}
];
var rows = 60;
for(var i = 0, l = data_list.length; i < rows; i++){
data.items.push(lang.mixin({ id: i+1 }, data_list[i%l]));
}
var store = new ItemFileWriteStore({data: data});
/*set up layout*/
var layout = [[
{'name': 'NAME', 'field': 'id', 'width': '150px'},
{'name': 'DESC', 'field': 'col2', 'width': '150px'},
{'name': 'CODE', 'field': 'col3', 'width': '150px'},
{'name': 'IS ENABLE', 'field': 'col4', 'width': '150px'}
]];
/*create a new grid*/
grid = new dojox.grid.DataGrid({
id: 'grid',
store: store,
structure: layout,
rowSelector: '20px'});
/*append the new grid to the div*/
grid.placeAt("gridDiv");
/*Call startup() to render the grid*/
grid.startup();
});
</script>
</head>
<body class="claro">
<div id="gridDiv"></div>
</body>
</html>
尝试
{
'name': 'NAME', 'field': 'id', 'width': '150px',
type: dojox.grid.cells.Bool, editable: true
}
您可以找到更多详细信息@
http://dojotoolkit.org/reference-guide/1.9/dojox/grid/DataGrid.html#editing-cells