显示/隐藏Dojo数据网格的最佳方式是什么？
我正在编写一个页面，该页面在显示数据网格之前需要一些用户输入。因此，理想情况下，页面的网格部分在加载页面时应该为空。一旦用户提供了特定的输入，网格就会出现在指定的位置。
我尝试过设置style="display:none"，然后编写js来设置display="block"，并在none和block之间切换，但它只显示网格的轮廓。
如果我省略了style="display:none"，网格会在加载时显示出来，然后我可以使用相同的代码隐藏/取消隐藏它，而不会出现任何问题。
我很困惑为什么当我在加载时设置display=none时它的行为会有所不同。解决这个问题的方法或替代方案是什么？
任何见解都值得赞赏。
<html lang="en">
<head>
<meta charset="utf-8">
<title>Dojo Test</title>
<link rel="stylesheet" href="/cv/static/css/demo.css" media="screen">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dijit/themes/claro/claro.css">
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojo/dojo.js" data-dojo-config="isDebug: true, async: true"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojo/resources/dojo.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojox/grid/resources/Grid.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojox/grid/resources/claroGrid.css">
<style type="text/css">
#target-grid{
width: 950px;
height: 350px;
/*visibility:hidden;*/
display: none;
position:relative; left:0; top:0; z-index:10;
border:1px solid #ebebeb; border-top:1px solid #f2f2f2;
-webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;
behavior:url('/media/css/PIE.htc');
float: left;
}
</style>
<script>
var myStore, dataStore, grid;
require([
"dojo/store/JsonRest",
"dojo/store/Memory",
"dojo/store/Cache",
"dojox/grid/DataGrid",
"dojo/data/ObjectStore",
"dojo/query",
"dojo/domReady!"
], function(JsonRest, Memory, Cache, DataGrid, ObjectStore, query){
myStore = Cache(JsonRest({target:"http://127.0.0.1:8080/cv/insight/data/2/"}), Memory());
grid = new DataGrid({
store: dataStore = ObjectStore({objectStore: myStore}),
structure: [
{name:"State Name", field:"name", width: "200px"},
{name:"Abbreviation", field:"id", width: "200px", editable: true}
]
}, "target-node-id"); // make sure you have a target HTML element with this id
grid.startup();
query("#save").onclick(function(){
dataStore.save();
});
});
</script>
<script>
require(["dijit/form/Button", "dojo/_base/Deferred", "dojo/_base/xhr", "dojo/_base/array", "dojo/dom-construct", "dojo/dom","dojo/domReady!"],
function(Button,Deferred, xhr, baseArray, domConstruct, dom) {
var button = new Button({
label: "Click Me!",
onClick: function(){
.......
}
}, "btn");
button.startup();
var button2 = new Button({
iconClass:"dijitIconNewTask",
showLabel:false,
label: "Click Me!", // analogous to title when showLabel is false
onClick: function(){
var ele = dom.byId("target-grid");
if(ele.style.display == "block") {
dojo.setStyle("target-grid", {"display": "none"});
//dojo.style(ele.domNode, 'display', 'none');
}
else {
dojo.setStyle("target-grid", {"display": "block"});
//dojo.style(ele.domNode, 'display', 'block');
//ele.startup();
ele.resize();
}
}
}, "btn2");
button2.startup();
});
</script>
</script>
</head>
<body class="claro">
<h1>Demo</h1>
<button id="btn"></button>
<button id="btn2"></button>
<ul id="userlist"></ul>
<div id="result1"></div>
<div id="target-grid"></div>
</body>
我认为设置display属性是正确的。如果我没记错的话，你也应该调用网格上的resize。如果网格是隐藏的，它的启动方法会被调用吗？你可能也需要这样做。
// to hide grid
dojo.style(grid.domNode, 'display', 'none');
// to show grid
dojo.style(grid.domNode, 'display', '');
// grid.startup(); // needed???
grid.resize();
针对评论
我使用了以下html。如果没有调整大小的调用，我可以看到网格的轮廓。有了resize调用，它就可以工作了。
<div dojoType="dojo.data.ItemFileReadStore" jsId="jsonStore" url="dojox/grid/tests/support/countryStore.json" ></div>
<table dojoType="dojox.grid.DataGrid"
jsid="grid" id="grid"
store="jsonStore" query="{ name: '*' }" rowsPerPage="20" rowSelector="20px"
style="width: 400px; height: 200px; display:none;">
<thead>
<tr>
<th field="name" width="300px">Country/Continent Name</th>
<th field="type" width="auto">Type</th>
</tr>
</thead>
</table>
我更新了你发布的代码，以便在代码中创建商店数据，并更改了以下
}, "target-node-id"); // make sure you have a target HTML element with this id
//to
}, "target-grid"); // make sure you have a target HTML element with this id
和
ele.resize();
// to
grid.resize();
它奏效了。
有一个破解方法：
我使用了一个字段集，然后在显示时在网格上调用sort（）。似乎有效。
<fieldset id="target-grid1" style="display:none">
<div id="target-grid"></div>
</fieldset>
然后在切换过程中调用：
dojo.setStyle("target-grid", {"display": "block"});
grid.sort();
您可以将它最初放置在屏幕外，并在希望它显示时将其移动到屏幕上（Dojo通过工具提示来实现这一点）。