layout
布局（layout）是有五个区域（北区 north、南区 south、东区 east、西区 west 和中区 center）的容器。两头的区域面板是必须的，边缘区域面板是可选的。每个边缘区域面板可通过拖拽边框调整尺寸，也能够通过点击折叠触发器来折叠面板。布局（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>能够借助一些插件