顯示/隱藏或切換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網格

回答

相關問題