easyui&8Jquery ztree树插件

最新推荐文章于 2025-09-08 22:40:31 发布

weixin_30518397

最新推荐文章于 2025-09-08 22:40:31 发布

阅读量90

点赞数

CC 4.0 BY-SA版权

文章标签： json ui javascript ViewUI

原文链接：http://www.cnblogs.com/javaxiaoxin/p/7309795.html

本文介绍如何在项目中使用Jqueryeasyui框架进行页面布局，并演示了如何利用ztree插件实现树形数据结构的展示。具体包括布局、折叠面板、选项卡等组件的配置方法。

7Jquery easyui前台UI框架
开发包：

7.1Layout页面布局
将课后资料中后台系统前台页面素材导入项目中

1、导入Jquery，easyui相关js,css文件
<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>
2、在body加样式 easyui-layout
3、在body添加多个div 通过data-options设置方位值 region:’north’
4、注意：中部区域必须保留
7.2accordion折叠面板

下一级div必须有title属性,才能展示折叠效果

7.3tabs选项卡面板

7.3.1调用easyui组件方法
方法名当作参数传进来





8Jquery ztree树插件
官网：ztree.me


8.1Ztree标准json数据
通过children指定下级节点数据：

1、导入ztree相关js文件
<link rel="stylesheet" href="${pageContext.request.contextPath }/js/ztree/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="${pageContext.request.contextPath }/js/ztree/jquery.ztree.all-3.5.js"></script>
2、在页面中提供ul元素
弊端：数据嵌套方式

8.2Ztree 简单json数据（掌握）
通过pid:指定上级节点的id