Javascript 显示/隐藏或切换Dojo网格
显示/隐藏Dojo数据网格的最佳方式是什么 我正在编写一个页面，该页面在显示数据网格之前需要一些用户输入。因此，理想情况下，加载页面时，页面的网格部分应为空/空白。一旦用户提供了特定的输入，网格应该显示在指定的位置 我尝试设置style=“display:none”，然后编写js来设置display=“block”，并在none和block之间切换，但它只显示网格的轮廓 如果我省略style=“display:none”，网格将在加载时显示，我可以随后隐藏/取消隐藏它，而不会出现相同代码的任何问题 我很困惑，当我设置display=none on load时，为什么它的行为会有所不同。解决这个问题的方法或替代方案是什么 任何洞察都是值得赞赏的Javascript 显示/隐藏或切换Dojo网格,javascript,dojo,dojox.grid,Javascript,Dojo,Dojox.grid,显示/隐藏Dojo数据网格的最佳方式是什么 我正在编写一个页面，该页面在显示数据网格之前需要一些用户输入。因此，理想情况下，加载页面时，页面的网格部分应为空/空白。一旦用户提供了特定的输入，网格应该显示在指定的位置 我尝试设置style=“display:none”，然后编写js来设置display=“block”，并在none和block之间切换，但它只显示网格的轮廓 如果我省略style=“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>
Dojo测试
#目标网格{
宽度：950px；
高度：350px；
/*可见性：隐藏*/
显示：无；
位置：相对；左侧：0；顶部：0；z索引：10；
边框：1px实心#ebebeb；边框顶部：1px实心#F2F2；
-webkit边框半径：5px；-moz边框半径：5px；边框半径：5px；
行为：url（'/media/css/PIE.htc'）；
浮动：左；
}
var myStore、数据存储、网格；
要求([
“dojo/store/JsonRest”，
“dojo/store/Memory”，
“dojo/store/Cache”，
“dojox/grid/DataGrid”，
“dojo/data/ObjectStore”，
“dojo/query”，
“dojo/domReady！”
]，函数（JsonRest、内存、缓存、数据网格、对象存储、查询）{
myStore=Cache（JsonRest（{target:http://127.0.0.1:8080/cv/insight/data/2/“}），内存（））；
网格=新的数据网格({
store:dataStore=ObjectStore（{ObjectStore:myStore}），
结构：[
{name:“State name”，字段：“name”，宽度：“200px”}，
{name:“缩写”，字段：“id”，宽度：“200px”，可编辑：true}
]
}，“目标节点id”）；//确保您有一个具有此id的目标HTML元素
grid.startup（）；
查询（#保存”）.onclick（函数（）{
dataStore.save（）；
});
});
require（[“dijit/form/Button”、“dojo/\u base/Deferred”、“dojo/\u base/xhr”、“dojo/\u base/array”、“dojo/dom构造”、“dojo/dom”、“dojo/domReady！”），
函数（按钮、延迟、xhr、baseArray、domConstruct、dom）{
var按钮=新按钮({
标签：“点击我！”，
onClick:function（）{
.......
}
}，“btn”）；
按钮。启动（）；
var button2=新按钮({
iconClass:“dijitIconNewTask”，
showLabel:false，
标签：“单击我！”，//类似于showLabel为false时的标题
onClick:function（）{
var ele=dom.byId（“目标网格”）；
如果（ele.style.display==“块”）{
setStyle（“目标网格”，{“显示”：“无”}）；
//style（ele.domNode，'display'，'none'）；
}
否则{
setStyle（“目标网格”，{“显示”：“块”}）；
//style（ele.domNode，'display'，'block'）；
//ele.startup（）；
ele.resize（）；
}
}
}，“btn2”）；
按钮2.启动（）；
});
演示
我认为设置显示属性是正确的。如果我没记错的话，还应该调用网格上的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调用，我可以看到网格的轮廓。使用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>
它成功了。有一种方法： 我使用了一个字段集，然后在显示时在网格上调用了sort（）。似乎有效
<fieldset id="target-grid1" style="display:none">
<div id="target-grid"></div>
</fieldset>
您可以先将其定位在屏幕外，然后在希望显示时将其移动到屏幕上（Dojo通过工具提示完成此操作）。Dojo的哪个版本？我上面的例子来自1.6.1。刚才看到您发布了代码。ele是一个DomeElement，其中resize预期将在widgetWell上调用，发现了一个hack-我使用了一个字段集，然后在显示时在网格上调用了sort（）。似乎有用。。。。。setStyle（“目标网格”，{“显示”：“块”}）；grid.sort（）；
ele.resize();
// to
grid.resize();
<fieldset id="target-grid1" style="display:none">
<div id="target-grid"></div>
</fieldset>
dojo.setStyle("target-grid", {"display": "block"});
grid.sort();