jQuery EasyUI ztree插件使用

最新推荐文章于 2025-05-12 14:28:13 发布

wkflyj

最新推荐文章于 2025-05-12 14:28:13 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/Wang_kang1/article/details/80587863

1.下载easyUI的开发包

该包的结构是

2.将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.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/easyui/jquery.easyui.min.js"></script>

1.1 layout页面布局

<body class="easyui-layout">
	<!-- 使用div元素描述每个区域 -->
	<div style="height: 100px" data-options="region:'north'">北部区域</div>
	<div style="width: 200px" data-options="region:'west'">西部区域</div>
	<div data-options="region:'center'">中心区域</div>
	<div style="width: 100px" data-options="region:'east'">东部区域</div>
	<div style="height: 50px" data-options="region:'south'">南部区域</div>
</body>

region

string

定义的布局面板位置,这个值是一个如下: north, south, east, west, center

显示界面

1.2 accordion折叠面板

<!-- 制作accordion折叠面板 
			fit:true----自适应(填充父容器)
		-->
		<div class="easyui-accordion" data-options="fit:true">
			<!-- 使用子div表示每个面板 -->
			<div data-options="iconCls:'icon-cut'" title="面板一">1111</div>
			<div title="面板二">2222</div>
			<div title="面板三">3333</div>
		</div>
效果：

显示界面

selected	boolean	设置为true来展开面板。	false
title	String	设置面板的标题
iconCls	String	一个图标的CSS类显示在选项卡面板标题	icon-search(查询) icon-add(增加) icon-cancel(删除) icon-save(保存)

1.3 tabs选项卡面板

<!-- 制作一个tabs选项卡面板 -->
		<div class="easyui-tabs" data-options="fit:true">
			<!-- 使用子div表示每个面板 -->
			<div data-options="iconCls:'icon-cut'" title="面板一">1111</div>
			<div data-options="closable:true" title="面板二">2222</div>
			<div title="面板三">3333</div>
		</div>

显示页面

closable

boolean

当设置为true,该选项卡面板将显示一个按钮就可闭点击关闭选项卡面板。

false

1.4在页面中引入ztree相关的文件：

<link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
	<script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
	<script type="text/javascript" src="../../../js/jquery.ztree.core-3.5.js"></script>

	<!-- 展示ztree效果 :使用标准json数据构造ztree-->
				<ul id="ztree1" class="ztree"></ul>
				<scrip

最低0.47元/天解锁文章

200万优质内容无限畅学