zTree树的创建、多选、多选框信息回显附带zTree树官网地址
zTree树官网:https://www.treejs.cn/v3/main.php#_zTreeInfo首先来到首页点击右上角下载
可以选择使用Git拉取也可以下载ZIP压缩包，两者选其一即可
下载打开文件夹以后是下面这些文件
然后将这些文件放你所使用的入项目当中，如下图
将文件放入项目当中以后，需要引入zTree树js文件
引入完文件以后，定义一个ul,一定要写上Class="ztree"样式
下面就比较简单了直接附上代码
最终出来就是下面的效果，我这里后端返回数据是使用的递归
数据格式大概就是这样，如果使用我这种格式没出来，下面还有死数据格式可以参考，直接将死数据数组在初始化树那里替换最后一个参数即可
//数据
//var zNodes = [
// 注意，数据中的 menuName 必须与 settingss 中key 中定义的name一致，否则找不到
// {
// menuName: "父节点1", open: false, children: [
// { menuName: "子节点1" }, { menuName: "子节点2" }]
// },
// {
// menuName: "父节点2", open: true, children: [
// { menuName: "子节点3" }, { menuName: "子节点4" }]
// }
//];
下面是多选框数据回显
$.ajax({
url: "/Operation/GetOperationById?id=" + id,
type: "get",
async: false,
success: function (res) {
var data = res.data;
var checkedNodeIds = [];//定义一个数据接收结点编号
checkedNodeIds = data.sectionId.split(',');// 需要回显的节点 ID,我获取的是后端的数据 我存入的数据是这样的格式：1,2,3
var zTreeObj = $.fn.zTree.getZTreeObj("treeDemo");//获取zTree树对象
//然后重新设置回显数据
for (var i = 0; i < checkedNodeIds.length; i++) {
var node = zTreeObj.getNodeByParam("id", checkedNodeIds, null);
if (node) {
node.checked = true;
zTreeObj.updateNode(node);
}
}
}
});
来源:https://www.cnblogs.com/ZXT3313/archive/2023/07/27/17586075.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！
页:
[1]