嵌套布局 - layout 嵌套 layout
8. datagrid 组件
DataGrid以表格形式展示数据,并提供了丰富的选择、排序、分组和编辑数据的功能支持。DataGrid的设计用于
缩短开发时间,并且使开发人员不需要具备特定的知识。它是轻量级的且功能丰富。单元格合并、多列标题、冻结
列和页脚只是其中的一小部分功能。
8.1 初始化
<%-- 北 --%>
<div data-options="title:'北',region:'north'" style="height: 80px"></div>
<%-- 中 --%>
<div data-options="title:'中',region:'center'"></div>
</body>
<%-- 整个页面布局:需要给body添加 class=“easyui-layout”样式 --%>
<body class="easyui-layout">
<%-- 添加layout的区域 --%>
<%-- 具体配置:查看“区域面板属性” --%>
<%-- 东 --%>
<%-- region:定义布局面板位置,可用的值有:north(北), south(南), east(东), west(西),
center。 --%>
<%--<div data-options="title:'东',region:'east'" style="width: 150px"></div>
--%>
<%-- 西 --%>
<div data-options="title:'西',region:'west'" style="width: 150px;"></div>
<%-- 南 --%>
<div data-options="title:'南',region:'south'" style="height: 80px"></div>
<%-- 北 --%>
<div data-options="title:'北',region:'north'" style="height: 80px"></div>
<%-- 中 --%>
<div data-options="title:'中',region:'center'">
<%-- 嵌套layout --%>
<%-- fit : 如果设置为true,布局组件将自适应父容器。当使用'body'标签创建布局的时候,
整个页面会自动最大。 --%>
<div class="easyui-layout" data-options="fit:true">
<div data-options="region:'west',title:'西边'" style="width:100px">
</div>
<div data-options="region:'center',title:'中间'"></div>
</div>
</div>
</body>