附上<div id="grid1"></div>里面<div></div>让它消失。
在下面的简单代码中，Datagrid 表现得非常好，直到包含在额外的 div 中为止。
这有效:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.8.0/dojo/resources/dojo.css" />
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.8.0/dojox/grid/resources/claroGrid.css" />
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.8.0/dijit/themes/claro/claro.css" />
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.8.0/dojo/dojo.js"></script>
<script>
require([
"dojo/store/Memory",
"dojo/data/ObjectStore",
"dojox/grid/DataGrid",
"dojo/domReady!"
], function(Memory, ObjectStore, DataGrid){
data = [
{ abbr:'ec', name:'Ecuador', capital:'Quito' },
{ abbr:'ec1', name:'Ecuador1', capital:'Quito1' }
];
var objectStore = new Memory({
data: data
});
grid = new DataGrid({
store: ObjectStore({objectStore: objectStore}),
structure: [
{name:"Country", field:"name", width: "150px"},
{name:"Abbreviation", field:"abbr"},
{name:"Capital", field:"capital"}
]
}, "grid1");
grid.startup();
});
</script>
</head>
<body class="claro">
before
<div id="grid1"></div>
after
</body>
</html>
这不起作用:
<body class="claro">
before
<div>
<div id="grid1"></div>
</div>
after
</body>
它适用于dojo v1.8、1.9甚至1.6。
我做错了什么？
最佳答案
问题已解决!
我所要做的就是添加这些代码行
#grid1
{
height: 20em;
}
更新(由ahatchkins)说明为什么这是必要的。引用文档:
The main reason for this is the “dynamic” nature of the grid itself. The grid needs to start laying itself out before it has any data - so it does not have a way to “know” how wide to draw the columns - because we don’t have the data. Depending on the browser, we are able to make a “best guess” - but it doesn’t work in all situations.
关于javascript - dojo 网格在 div 内不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16981212/