3.easyui+ztree案例：使用easyui布局

最新推荐文章于 2018-12-22 09:38:39 发布

Mr羽墨青衫

最新推荐文章于 2018-12-22 09:38:39 发布

阅读量5.1k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： jQuery 文章标签： easyui jquery

本文链接：https://blog.youkuaiyun.com/xzm_rainbow/article/details/16859807

jQuery 专栏收录该内容

6 篇文章

订阅专栏

本文通过一个实际案例介绍了如何结合EasyUI和ZTree进行页面布局。首先在项目中引入EasyUI所需的文件，然后创建一个演示页面easyui_layout.jsp。利用EasyUI的layout控件将页面划分为东西南北中五个部分，并对每个区域添加标题进行美化。通过调整布局，例如注释掉东部区域的div，可以进一步定制布局效果。通过这种嵌套布局的方式，EasyUI能实现复杂的页面设计需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1，首先在页面中引入easyui。

把需要的文件和文件夹复制到项目中：

在easyuidemo中建立演示文件，easyui_layout.jsp。

在这个页面中引入easyui需要的文件。

<!-- 引入jQuery Easyui -->
<link rel="stylesheet" type="text/css" 
href="${pageContext.request.contextPath}/js/easyui/themes/default/easyui.css"> 
<link rel="stylesheet" type="text/css" 
href="${pageContext.request.contextPath}/js/easyui/themes/icon.css"> 
<script type="text/javascript" 
	src="${pageContext.request.contextPath}/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" 
src="${pageContext.request.contextPath}/js/easyui/jquery.easyui.min.js"></script>

使用easyui提供的layout控件布局。

布局可以对整个body布局，也可以对div布局。

Layout布局可以将页面分为东西南北中五个部分，中部是必须的。

在body中写5个div。

<body class="easyui-layout">
	<!-- layout页面布局，分为东西南北中五个部分，中部是必须的 -->
	<!-- 首先要给body一个属性，class='easyui-layout' -->
	<!-- 然后在每个div中指定每个div属于哪个区域，通过data-options="region:'north'" -->
	<!-- 为每一部分设置宽高 style="height:100px" -->
	<div data-options="region:'north'" style="height:100px">北部</div>
	<div data-options="region:'south'" style="height:60px">南部</div>
	<div data-options="region:'center'">中部</div>
	<div data-options="region:'west'" style="width:200px">西部</div>
	<div data-options="region:'east'" style="width:100px">东部</div>
</body>

当前效果：

有点难看，为每个区域添加标题，美化：

<body class="easyui-layout">
	<!-- layout页面布局，分为东西南北中五个部分，中部是必须的 -->
	<!-- 首先要给body一个属性，class='easyui-layout' -->
	<!-- 然后在每个div中指定每个div属于哪个区域，通过data-options="region:'north'" -->
	<!-- 为每一部分设置宽高 style="height:100px" -->
	<!-- 为每个区域设置title，添加顶部标题，美化页面，通过data-options="title:'北部区域'"设置 -->
	<div data-options="region:'north',title:'北部区域'" style="height:100px">北部</div>
	<div data-options="region:'south',title:'南部区域'" style="height:60px">南部</div>
	<div data-options="region:'center',title:'中部区域'">中部</div>
	<div data-options="region:'west',title:'西部区域'" style="width:200px">西部</div>
	<div data-options="region:'east',title:'东部区域'" style="width:100px">东部</div>
</body>

当前效果：

我们不需要东部区域，将东部区域的div注释掉：

<%--<div data-options="region:'east',title:'东部区域'" style="width:100px">东部</div>--%>

效果：

其实可以用easyui做出任何的布局，因为在每个区域的div中又可以嵌套布局div，一层一层的嵌套下去，可以实现任何页面布局效果。