• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

layout&树形结构

互联网 diligentman 1周前 (02-19) 6次浏览

layout

布局(layout)是有五个区域(北区 north、南区 south、东区 east、西区 west 和中区 center)的容器。中间的区域面板是必需的,边缘区域面板是可选的。每个边缘区域面板可通过拖拽边框调整尺寸,也可以通过点击折叠触发器来折叠面板。布局(layout)可以嵌套,因此用户可建立复杂的布局。
layout&树形结构

代码解析:

<!--给div指定class属性指定easy的easyui-layout样式,这样就可以通过div创建easyui的layout -->
<div id="cc" class="easyui-layout" style="width:600px;height:400px;">
    <!--布局中如果不需要north这个面板,那么可以删掉这个div-->
    <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>
    <!-- 布局中如果不需要south这个面板,那么可以删掉这个div -->
    <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>
    <!-- 布局中如果不需要east这个面板,那么可以删掉这个div -->
    <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>
    <!-- 布局中如果不需要west这个面板,那么可以删掉这个div -->
    <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>
    <!--north,south, east,west这几个面板都可以删掉,唯有这个center面板一定不能删掉,否则使用easyui-layout就会出错 -->
    <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>
</div>

树形结构

<div data-options="region:'west',title:'菜单',split:true" style="width:10%;">
   
      <ul class="easyui-tree">
        <li>
            <span>商品管理</span>
            <ul>
                <li>商品新增</li>
                <li>商品修改</li>
                <li>
                    <span>商品删除</span>
                    <ul>
                        <li>删除1</li>
                        <li>删除2</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>
            <span>商品标题</span>
        </li>
      </ul>
   </div>

可以借助一些插件


程序员灯塔
转载请注明原文链接:layout&树形结构
喜欢 (0)