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>

我拥有所有相应的DOJO.requires（）。请让我知道我缺少什么来显示相同的数据存储，在不同的手风琴容器中以不同的方式显示？

由于 SK

Answer 1

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

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

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>

多个DOJO数据网格不在Accordion Containers中显示

3 个答案: