jquery——zTree树插件的简单实例

本文介绍了如何使用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);
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值