显示/隐藏或切换Dojo网格

显示/隐藏Dojo数据网格的最佳方式是什么？显示/隐藏或切换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>

来源

2012-02-29 rhm2012

我想设置显示属性是正确的。如果我没有记错，你还应该调用网格上的大小。如果网格隐藏，它的启动方法会被调用吗？您可能也需要这样做。

// to hide grid 
dojo.style(grid.domNode, 'display', 'none'); 

// to show grid 
dojo.style(grid.domNode, 'display', ''); 
// grid.startup(); // needed??? 
grid.resize();

在回应评论

我用下面的HTML。如果没有调整大小，我会看到网格的轮廓。随着调整大小调用它的作品。你贴

<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();

和它的工作。

来源

2012-02-29 18:27:29

这就是我正在做的，但奇怪的是，它不起作用！ :( – rhm2012 2012-02-29 19:40:24

什么版本的Dojo？我上面的例子是从1.6.1. – 2012-02-29 19:56:13

刚刚看到你发布了代码ele是一个domElement，其中resize有望在widget上调用 – 2012-02-29 20:06:17

这位一个黑客：

我使用的字段集，然后要求在显示网格中的排序（）。似乎工作。

<fieldset id="target-grid1" style="display:none"> 
    <div id="target-grid"></div> 
</fieldset>

然后在你切换过程调用：

dojo.setStyle("target-grid", {"display": "block"}); 
grid.sort();

来源

2012-03-01 14:33:24 rhm2012

你可以初始定位它关闭屏幕，当你想让它显示（道场这是否有提示），屏幕上的移动。

来源

2012-03-23 18:09:55 Tom

显示/隐藏或切换Dojo网格

回答

相关问题