如何构建具有多个嵌套布局的easyui布局？

Question

我在我的应用程序中使用了 easyui 嵌套布局。我参考了easyui演示中给出的以下代码。

<div class="easyui-layout" style="width:700px;height:350px;">
        <div data-options="region:'north'" style="height:50px"></div>
        <div data-options="region:'south',split:true" style="height:50px;"></div>
        <div data-options="region:'east',split:true" title="East" style="width:180px;"></div>
        <div data-options="region:'west',split:true" title="West" style="width:100px;"></div>
        <div data-options="region:'center',iconCls:'icon-ok'" title="Center">
            <div class="easyui-layout" data-options="fit:true">
                <div data-options="region:'north',split:true,border:false" style="height:50px"></div>
                <div data-options="region:'west',split:true,border:false" style="width:100px"></div>
                <div data-options="region:'center',border:false"></div>
            </div>
        </div>
 </div>

演示链接是

http://www.jeasyui.com/demo/main/index.php?plugin=Layout&theme=default&dir=ltr&pitem=

我需要像这样使用多个内部布局。

<div class="easyui-layout" style="width:700px;height:350px;">
         <div data-options="region:'north'" style="height:50px"></div>
         <div data-options="region:'south',split:true" style="height:50px;"></div>
         <div data-options="region:'east',split:true" title="East" style="width:180px;"></div>
         <div data-options="region:'west',split:true" title="West" style="width:100px;"></div>
         <div data-options="region:'center',iconCls:'icon-ok'" title="Center">
             <div class="easyui-layout" data-options="fit:true" id="innerlayout1">
                 <div data-options="region:'north',split:true,border:false" style="height:50px"></div>
                 <div data-options="region:'west',split:true,border:false" style="width:100px"></div>
                 <div data-options="region:'center',border:false"></div>
             </div>
             <div class="easyui-layout" data-options="fit:true" id="innerlayout2" style="display:none;">
                          <div data-options="region:'north',split:true,border:false" style="height:50px"></div>
                          <div data-options="region:'west',split:true,border:false" style="width:100px"></div>
                          <div data-options="region:'center',border:false"></div>
             </div>
             <div class="easyui-layout" data-options="fit:true" id="innerlayout3" style="display:none;">
                          <div data-options="region:'north',split:true,border:false" style="height:50px"></div>
                          <div data-options="region:'west',split:true,border:false" style="width:100px"></div>
                          <div data-options="region:'center',border:false"></div>
             </div>
         </div>
 </div>

默认情况下，第一个内部布局是可见的，对于这个东部区域，必须处于展开状态。并且当另一个内部布局变得可见时，其他内部布局被隐藏并且东部区域被折叠。我的问题是，当东部地区崩溃时，中心和东部地区之间会出现一个空白区域。我想让中心区域扩大，这样空间就不会来了。

对不起，我的英语很差。请帮我解决这个问题。

Answer 1

如果我理解您要做什么，您需要先将中心分为西、中、东，然后将每个中心分为北、西和中：

<div class="easyui-layout" data-options="fit:true";">
        <div data-options="region:'north',split:true" style="height:50px"></div>
        <div data-options="region:'south',split:true" style="height:50px;"></div>
        <div data-options="region:'east',split:true" title="East" style="width:100px;"></div>
        <div data-options="region:'west',split:true" title="West" style="width:100px;"></div>
        <div data-options="region:'center', split:true">
            <div class="easyui-layout" data-options="fit:true">
                <div data-options="region:'east',split:true" style="width:250px">
                     <div class="easyui-layout" data-options="fit:true">
                        <div data-options="region:'north',split:true" Title="Center East" style="height:150px"></div>
                        <div data-options="region:'west',split:true"  style="width:125px;"></div>
                        <div data-options="region:'center',split:true"></div>
                    </div>
                </div>
                <div data-options="region:'west',split:true" style="width:250px">
                    <div class="easyui-layout" data-options="fit:true">
                        <div data-options="region:'north',split:true" Title="Center West" style="height:150px"></div>
                        <div data-options="region:'west',split:true"  style="width:125px;"></div>
                        <div data-options="region:'center',split:true"></div>
                    </div>
                </div>
                <div data-options="region:'center',split:true" >
                   <div class="easyui-layout" data-options="fit:true">
                        <div data-options="region:'north',split:true" Title="Center Center" style="height:150px"></div>
                        <div data-options="region:'west',split:true"  style="width:125px;"></div>
                        <div data-options="region:'center',split:true"></div>
                    </div>
                </div>
            </div>
        </div>
     </div>

结果：