Question

显示/隐藏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>

Answer 1

我认为设置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。没有调整大小调用，我会看到网格的轮廓。通过调整大小调用，它可以正常工作。

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

并且有效。

Answer 2

有一个黑客：

我使用了一个fieldset，然后在显示时在网格上调用了sort（）。似乎工作。

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

然后在您的切换程序中调用：

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

Answer 3

您可以将它最初放在屏幕上并在屏幕上将其移动到屏幕上（Dojo使用工具提示执行此操作）。

显示/隐藏或切换Dojo网格

3 个答案: