多个 DOJO 数据网格未显示在手风琴容器中

Question

我有一个包含 3 个标签的页面 (dijit.layout.TabContainer)，每个标签有 2-3 个手风琴 (dijit.layout.AccordionContainer)。在单个数据存储中，我尝试在每个手风琴中显示不同的网格。

我可以在一个手风琴中显示数据，但其他网格显示为空白，我什至看不到标题。如果我尝试在标签/手风琴之外显示多个网格，它工作正常。不知道我在这里缺少什么。

        var jsonStore = new dojo.data.ItemFileWriteStore({ data:{
   "identifier": "rowIdentifier",
   "label": "gridIdentifier",
   "items": [
      {
        "rowIdentifier": 123,
        "gridIdentifier": "labor",
         "description": "Project Manager",
         "hours": 100.0,
         "rate": 100.0
      },
      {
      "rowIdentifier": 234,
       "gridIdentifier": "oem",
         "description": "Developer",             
         "hours": 100.0,
         "rate": 100.0
      }
   ]
} });               
            var grid1 = null;   
            var grid2 = null;
            var grid1Layout= [
                { field: "rowIdentifier", width: "auto", name: "Row Identifier",hidden:true },
                { field: "gridIdentifier", width: "auto", name: "Grid Identifier",hidden:true },
                { field: "description", width: "auto", name: "Tier/Description", editable:true },

                { field: "hours", width: "auto", name: "Hours" },
                { field: "rate", width: "auto", name: "Rate <br/>" }               
            ];

            grid1 = new dojox.grid.DataGrid({
                query: { gridIdentifier: 'labor' },
                store: jsonStore,
                singleClickEdit: true,
                structure: grid1Layout,
                rowsPerPage: 6
            }, 'grid1Node');  

            var grid2Layout= [
                { field: "rowIdentifier", width: "auto", name: "Row Identifier",hidden:true },
                { field: "gridIdentifier", width: "auto", name: "Grid Identifier",hidden:true },
                { field: "description", width: "auto", name: "Tier/Description", editable:true },
                { field: "hours", width: "auto", name: "Hours" },
                { field: "rate", width: "auto", name: "Rate <br/>" }

            ];

            grid2 = new dojox.grid.DataGrid({
                query: { gridIdentifier: 'oem' },
                store: jsonStore,
                singleClickEdit: true,
                structure: grid2Layout,
                rowsPerPage: 6
            }, 'grid2Node');


         // Call startup, in order to render the grid:
            grid1.startup();
            grid2.startup(); 

下面是我的 HTML

<div style="height: 105px;">
                            <div dojoType="dijit.layout.TabContainer" style="width: 100%;"
                                doLayout="false">
                                <div dojoType="dijit.layout.ContentPane" title="Labor" selected="true">
                                    <div id="LaborAccordian" style="width:auto; height: 300px">
                                        <div dojoType="dijit.layout.AccordionContainer" style="height: 300px;">
                                            <div dojoType="dijit.layout.ContentPane" title="Tab1 Acc1" selected="true">
                                            <div id="grid1Node"></div></div>
                                            <div dojoType="dijit.layout.ContentPane" title="Tab1 Acc2"><div id="SubContractorLaborGridNode"></div></div>
                                            <div dojoType="dijit.layout.ContentPane" title="Tab1 Acc3"><div id="VendedLaborGridNode"></div></div>
                                        </div>
                                    </div>
                                </div>
                                <div dojoType="dijit.layout.ContentPane" title="OEM products">
                                    <div id="OEMAccordian" style="width:auto; height: 300px">
                                        <div dojoType="dijit.layout.AccordionContainer" style="height: 300px;">
                                            <div dojoType="dijit.layout.ContentPane" title="Tab2 Acc1"><div id="grid2Node"></div></div>
                                            <div dojoType="dijit.layout.ContentPane" title="Tab2 Acc2" selected="true"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- end of the div -->
                        </div>

我在 .请让我知道在不同的手风琴容器中以不同的风格显示相同的数据存储时缺少什么？

谢谢 SK

Answer 1

根据您的描述，很可能网格已成功创建，但由于尺寸为 0 * 0 而未显示。这可能是因为在隐藏的手风琴窗格中创建网格时，网格的大小包含DOM 节点实际上为零。因此，当隐藏的手风琴窗格可见时，网格大小仍然为零。这也可能是由于在网格的包含节点中使用 CSS 指定了动态高度和宽度，例如使用高度或宽度，如100%。在计算实际高度和宽度时，动态高度或宽度可能会导致问题。

所以我的建议是首先使用 Firebug 检查 DOM 结构，看看是否创建了网格。您很可能会看到网格的 DOM 结构，但它没有显示出来，因为大小为 0 * 0。您可以使用 Firebug 来验证它。如果是这种情况，您可以使用resize 函数手动指示网格再次重新计算其大小。您可以使用dojo.connect 连接到dijit.layout.AccordionPane 的onSelected 函数并调用网格的resize 函数。然后当一个手风琴页面被选中时，它里面的网格会自动调整大小。

Answer 2

我认为 Alex Cheng 说的是正确的。以下更改可能会解决此问题。

<div id="grid1Node" style="height:100%"></div>
<div id="grid2Node" style="height:100%"></div>

为 Grid dom 节点的容器应用高度。

Answer 3

另一种解决方案是使用绝对（非动态）高度设置，例如：

<div id="grid1Node" style="height:100px"></div>
<div id="grid2Node" style="height:100px"></div>