jquery——zTree树插件的简单实例_ztree--jquery 树插件,是在后台管理页面中常使用到的插件-优快云博客

本文链接：https://blog.youkuaiyun.com/qinyf2015/article/details/78131521

本文介绍了如何使用jQuery和zTree插件创建树形结构。通过展示后台数据库表、jsp、js以及java后台实现类的代码，详细阐述了zTree的基本配置和数据转换过程，包括设置数据源、定义回调函数以及处理节点点击事件。

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

效果图
这里写图片描述

后台数据库表：
这里写图片描述

代码：
jsp代码：
这里写图片描述

js代码：
$(function() {
var selectedNode, isAddUser = false;
var setting = {
data: {
simpleData: {
enable: true
}
},
callback: {
//onClick: zTreeOnClick,
beforeClick: zTreeBeforeClick
}
};
function zTreeBeforeClick(treeId, treeNode, clickFlag) {
return (!isAddUser && treeNode.level == 1);
};

function getAllUsers(async) {
    var request = {};
    var reqData = {}
    request.data = reqData;
    request.action = "getVipByStatus";

    $.ajax({
        type : "POST",
        url : "web/vip/vip.do",
        dataType : "json",
        async: async,   
        contentType : "application/json",
        data : JSON.stringify(request),
        success : function(res) {
            if (res.success) {
                $.fn.zTree.init($("#vipTree"), setting, res.data.ztreeNodes);
            } else {
            }
        }
    });
}
function init() {
    getAllUsers(true);
}   
init();

})

java后台实现类代码：

public void deal(JWRequest request, JWResponse response)
throws ErrorCodeException {
// TODO Auto-generated method stub
String action = request.getAction();
if (“getVipByStatus”.equalsIgnoreCase(action)) {
getVipLists(request, response);
}
}
private void getVipLists(JWRequest request, JWResponse response) {
VipExample example = new VipExample();
List vipList = this.vipDao.selectByExample(example);
String s=vipList.toString();
System.out.println(s);
// 转换成ztree格式
JSONArray ztreeNodes = new JSONArray();
JSONObject json = new JSONObject();
json.put(“id”, 0);
json.put(“pId”, -1);
json.put(“name”, “所有会员”);
json.put(“open”, true);
json.put(“icon”, “web/images/sm_role.png”);
ztreeNodes.add(json);

    for (Vip user: vipList) {
        json = new JSONObject();
        json.put("id", user.getWxid());
        json.put("pId", "0");//pId父节点
        json.put("name", user.getName());
        json.put("icon", "web/images/sm_user.png");
        json.put("mobile", user.getMobile());
        json.put("type", user.getType());
        ztreeNodes.add(json);           
    }

    JSONObject resData = new JSONObject();
    resData.put("ztreeNodes", ztreeNodes);
    response.setData(resData);
}