ztree,很好用的组件今天用它来练练手,感觉挺好用的,过程中,还是要心细,组织数据不能出错
页面:
<!--ztree样式引入-->
<link rel="stylesheet" href="<%=basePath%>css/zTreeStyle/zTreeStyle.css" type="text/css">
<!--jquery包引入 -->
<script type="text/javascript" src="<%=basePath%>js/jquery-1.4.4.min.js"></script>
<!--ztree包引入 -->
<script type="text/javascript" src="<%=basePath%>js/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var setting;
function happenError(event,treeId,treeNode,msg){
alert("加载失败啦");
}
function doSuccess(event,treeId,treeNode,msg){
alert("加载成功啦"+msg);
}
function zTreeOnclick(event,treeId,treeNode,msg)
{
alert("你点击了节点"+msg);
}
setting = {
async:{
autoParam: ["id"],
enable: true,
dataType:"json",
enable:true,
type:"post",
otherParam:{"id":"0"},
url: "<%=basePath%>"+"servlet/Tree"
},
data:{
keep:{
leaf:false,
parent:true
},
key:{
children:"children",
name:"name",
url:"xUrl"
},
simpleData:{
enable:true,
idKey:"id",
pIdKey:"pId",
rootPid:null
}
},
callback:{
onAsyncError:happenError,
onAsyncSuccess:doSuccess,
onClick:zTreeOnclick
}
}
$(document).ready(function(){
$.fn.zTree.init($("#treeMe"), setting);
})
});
</script>
</head>
<body>
<div>
<ul id="treeMe" class="ztree"></ul>
</div>
</body>
后台组织了简单的几个节点:
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html");
PrintWriter out = response.getWriter();
int idString = Integer.parseInt(request.getParameter("id"));
System.out.println(idString);
//构造节点,对具体应用,可从数据库中取数据进行构造
List<Node> list = new ArrayList<Node>();
Node node2= new Node();
node2.setParent(false);
node2.setName("sonNode");
List<Node> childrenList = new ArrayList<Node>();
childrenList.add(node2);
Node node1 = new Node();
node1.setParent(true);
node1.setName("parentNode");
node1.setChildren(childrenList);
Node node3 = new Node();
node3.setParent(false);
node3.setName("parentNode3");
list.add(node1);
list.add(node3);
System.out.println(JSONArray.fromObject(list).toString());
//以JSON数据模式反回给前台
out.print(JSONArray.fromObject(list).toString());
}
节点类的简单定义
public class Node implements Serializable {
/**
*
*/
private static final long serialVersionUID = 1L;
private List<Node> children;//字节点集合
private String icon;//自定义节点图标url路径
private String iconClose;//自定义父节点折叠图标url路径
private String iconOpen;//自定义父节点展开图标url路径
private String iconSkin;//节点自定义图标的 className 需要修改 css，增加相应 className 的设置
private boolean isParent;//是否是父节点
private String name;//节点名称
private boolean open;//是否展开
public String getIcon() {
return icon;
}
public void setIcon(String icon) {
this.icon = icon;
}
public String getIconClose() {
return iconClose;
}
public void setIconClose(String iconClose) {
this.iconClose = iconClose;
}
public String getIconOpen() {
return iconOpen;
}
public void setIconOpen(String iconOpen) {
this.iconOpen = iconOpen;
}
public String getIconSkin() {
return iconSkin;
}
public void setIconSkin(String iconSkin) {
this.iconSkin = iconSkin;
}
public boolean isParent() {
return isParent;
}
public void setParent(boolean isParent) {
this.isParent = isParent;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public boolean isOpen() {
return open;
}
public void setOpen(boolean open) {
this.open = open;
}
public void setChildren(List<Node> children) {
this.children = children;
}
public List<Node> getChildren() {
return children;
}
}
分享到：
相关推荐
zTree是一款流行的JavaScript插件，专门用于创建交互式的树形菜单或树状视图。本主题聚焦于如何在Java后端组装zTree所需的树结构，并与MySQL数据库进行交互。以下是关于这个主题的详细知识点： 1. **zTree**： - ...
zTree是一款基于jQuery的强大的树形插件，它在网页中广泛用于构建各种类型的树状结构，如文件目录、组织架构、菜单等。zTree以其轻量级、高性能和丰富的功能，深受开发者喜爱。以下是对zTree核心特性和使用方法的...
在这个场景中，"zTree树形带JSON"是一个基于JSON数据格式的树形组件，广泛应用于网页端展示层次化的信息，例如文件系统、组织结构或者导航菜单。zTree是一款功能丰富的JavaScript插件，它能够高效地处理和渲染树形...
ZTree是用于前端展示的JavaScript库，主要用于构建树形菜单和数据展示。为了在网页上显示Java构建的树结构，我们需要： 1. 引入ZTree的CSS和JS库。 2. 在后端生成ZTree所需的JSON数据。 3. 前端页面中设置ZTree的...
Ztree，全称Z-Blog Tree，是一款基于jQuery的灵活、强大的树状菜单插件。它在Web开发中被广泛应用于展示具有层级关系的数据，如组织结构、目录树、权限管理等。本文将深入探讨如何利用Ztree实现无限极分类，以及如何...
ZTree在Web开发中广泛应用于文件管理、组织结构展示、菜单导航等多种场景。通过集成ZTree，我们可以为Ionic应用添加更丰富的用户界面元素。 首先，让我们了解 Ionic 和 ZTree 的基本概念。Ionic 是一个开源的移动...
这通常在前端库如zTree、dtree等中作为后台数据来呈现多级菜单或分类。 首先，我们需要定义一个树节点类（TreeNode）来存储每个节点的信息。这个类至少包括两个属性：一个是`level`，表示节点所在的层级；另一个是`...
其他还有ztree树形组件、echarts百度报表插件、paging分页组件。。 实现了几个单表的CRUD操作的几个模块，其中"子系统管理"模块探索了多表关联的复杂操作。并且为了实现模糊查询，试写了一个构造原生SQL进行分页查询...
其他还有ztree树形组件、echarts百度报表插件、paging分页组件。。 实现了几个单表的CRUD操作的几个模块，其中"子系统管理"模块探索了多表关联的复杂操作。并且为了实现模糊查询，试写了一个构造原生SQL进行分页查询...
其他还有ztree树形组件、echarts百度报表插件、paging分页组件。。 实现了几个单表的CRUD操作的几个模块，其中"子系统管理"模块探索了多表关联的复杂操作。并且为了实现模糊查询，试写了一个构造原生SQL进行分页查询...