首先来一个完整的ztree代码

html代码

<form id="addTreeDataFrm" method="post" class="form-horizontal" style="width:300px;">

    <div class="form-group">
<div class="col-sm-8">
<select id="catTreeData" name="catTreeData" class="form-control" >
<option value="" selected="selected">请选择</option>
</select>
</div>
</div> <div class="form-group">
<div class="col-sm-12">
<div id="treeDiv">
<ul id="tree" class="ztree"
style="width:200px;min-height:200px;height:100px;overflow:auto;scroll:y"></ul>
</div>
</div>
</div>
</form>

js

第一步:发送ajax请求,获取json数据体

// 获取分类下拉数据,并初始化分类数据
function getCateData() {
var catStr = $('#goodsType').val();
var catArr = [];
catArr = catStr.split(',');
var catCode = catArr[1];
if(catCode=="ebook"){
catCode="BOOK";
}
var url = PlatForm.getContext() + '/spc/memberRight/getCategoryByCode.do';
// var url ='data/bookCategory.json'
$.ajax({
url: url,
type: 'post',
async: false,
data: {
'catCode': catCode
},
dataType: "json",
success: function (resultData) {
if (resultData == null || resultData.length == 0) {
mif.showErrorMessageBox("当前资源类型暂无分类!");
return false;
}
//显示图书分类下拉框选项
$("#catTreeData").empty();
for (var i = 0; i < resultData.length; i++) {
if ( resultData[i].code=="BOOK"){
$("#catTreeData").append('<option value= "'+ resultData[i].code + '"selected>' + resultData[i].catNametype + '</option>');
}else {
$("#catTreeData").append('<option value=' + resultData[i].code + '>' + resultData[i].catNametype + '</option>');
}
}
//数据转换
getNodeList(resultData);
//第一次初始化数据
var zTreeNodes = $dataMap[resultData[0].code];
//数据转换
initTree(zTreeNodes);
}
});
}

2.对获取的数据体进行处理,提取数据体中的list数据数组datalist

//获取data数据体
function getNodeList(nodeList) {
for (var i = 0; i < nodeList.length; i++) {
var dataNode = nodeList[i];
var datalist = dataNode.datalist; //BOOK 分类码
var catCode = dataNode.code; // book数据
var catName = dataNode.catNametype;//图书分类名称
$dataMap[catCode] = datalist;
$nameMap[catCode] = catName;
}
}

 3.初始化ztree initTree(zTreeNodes),内部需要对数据进行重新包装!!!,也就是getNode(zTreeNodes)

var zTreeObj;
//初始化树
function initTree(zTreeNodes) {
// zTreeNodes = changeDataToZtree(zTreeNodes);
zTreeNodes = getNode(zTreeNodes);
var setting = { check: {
enable: true, //check选项
chkboxType: {"Y": "ps", "N": "ps"}//父子关联
},
view: {
selectedMulti: false
}
};
zTreeObj = $.fn.zTree.init($("#tree"), setting, zTreeNodes);//绑定ztree对应的树
}

 4 数据转换,最重要的一步,此处要根据返回的list数据格式进行不同的包装。如果返回的格式是如下,也就是含有children字段的

//ztree数据类型转换
function getNode(node) {
var catlogArr = new Array();
for (var i = 0; i < node.length; i++) {
var title = node[i].text + "[" + node[i].id + "]";
if (!node[i].hasOwnProperty("children")) {
// if (node[i].children.length == 0) {
catlogArr.push({
"name": node[i].text,
"id": node[i].id,
"pId": node[i].cattype,
"title": title,
"isParent": node[i].isRef,
"nocheck": null,
"cascadeId": node[i].cascadeId,
"children": null
});
// }
}
else {
catlogArr.push({
"name": node[i].text,
"id": node[i].id,
"pId": node[i].cattype,
// "pId": $catlogData[i].parentClassifyId,
"title": title,
"isParent": node[i].isRef,
"nocheck": null,
"cascadeId": node[i].cascadeId,
"children": getNode(node[i].children)
});
} }
return catlogArr;
}

  如果返回的数据没有children字段,只是简单父子数据格式

//ztree数据类型转换,采用ztree简单数据格式
function getNode(node) {
var catlogArr = new Array();
for (var i = 0; i < node.length; i++) {
//如果是父节点,展开节点
if(node[i].parentId==0){
catlogArr.push({
"name": node[i].name,
"id": node[i].id,
"pId": node[i].parentId,
"open":true,
"isParent":true
});
}else {
catlogArr.push({
"name": node[i].name,
"id": node[i].id,
"pId": node[i].parentId
});
}
}
return catlogArr;
}

  简单数据格式需要注意的是

 simpleData: enable:true,//此处必须为true
       
 var setting = {
check: {
enable: false,
chkboxType: {"Y": "ps", "N": "ps"}
},
view: {
dblClickExpand: false,
showLine: true,
selectedMulti: false
},
data: {
simpleData: {
enable:true,//此处必须为true
idKey: "id",
pIdKey: "pId",
rootPId: ""
}
},
callback: {
beforeClick: function(treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("#resTree");
//如果是父节点,则展开
if (treeNode.isParent) {
zTree.expandNode(treeNode);
return false;
} else {
return true;
}
},
onClick: zTreeOnClick
}
};

  

ztree多种数据包装以及相关设置的更多相关文章

  1. 项目一:项目第二天 Jquery ztree使用展示菜单数据 2、 基础设置需求分析 3、 搭建项目框架环境--ssh(复习) 4、 SpringData-JPA持久层入门案例(重点) 5、 Easyui menubutton菜单按钮使用 6、 Easyui messager消息框使用

    1. Jquery ztree使用展示菜单数据 2. 基础设置需求分析 3. 搭建项目框架环境--ssh(复习) 4. SpringData-JPA持久层入门案例(重点) 5. Easyui menu ...

  2. Python 数据分析(二 本实验将学习利用 Python 数据聚合与分组运算,时间序列,金融与经济数据应用等相关知识

    Python 数据分析(二) 本实验将学习利用 Python 数据聚合与分组运算,时间序列,金融与经济数据应用等相关知识 第1节 groupby 技术 第2节 数据聚合 第3节 分组级运算和转换 第4 ...

  3. ggplot2 scale相关设置

     ggplot2   scale相关设置 标度设置:主要用于在ggplot画图后的各个图层进行调整设置. 1.相关属性scale设置 包括scale_size().scale_alpha().scal ...

  4. php curl_setopt的相关设置查询手册

    bool curl_setopt (int ch, string option, mixed value) curl_setopt()函数将为一个CURL会话设置选项.option参数是你想要的设置, ...

  5. 64位 windows10下 Apache2.4 + php7 + phpstorm 相关设置

    64位 windows10下 Apache2.4 + php7 + phpstorm 相关设置   转  https://blog.csdn.net/laurencechan/article/deta ...

  6. DELL服务器iDRAC相关设置

    iDRAC又称为Integrated Dell Remote Access Controller,也就是集成戴尔远程控制卡 iDRAC卡相当于是附加在服务器上的一台小电脑,通过与服务器主板上的管理芯片 ...

  7. 你所不知道的 CSS 阴影技巧与细节 滚动视差?CSS 不在话下 神奇的选择器 :focus-within 当角色转换为面试官之后 NPOI 教程 - 3.2 打印相关设置 前端XSS相关整理 委托入门案例

    你所不知道的 CSS 阴影技巧与细节   关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 filter:drop-shadow 详解及奇技淫巧,介绍了一些关于 box-shadow  ...

  8. (转)MySQL open_files_limit相关设置

    http://www.cnblogs.com/zhoujinyi/archive/2013/01/31/2883433.html---------------------------MySQL ope ...

  9. java连接SQL数据库(JDBC)相关设置

    2016-06-14 一.SQL server中的相关设置(以sql server 2012 版本为例) 建立一个SQL server 身份认证的服务器登录名 首先启动SQL客户端,以windows身 ...

随机推荐

  1. 在 manifest 和代码中如何注册和使用 BroadcastReceiver?

    在清单文件中注册广播接收者称为静态注册,在代码中注册称为动态注册.静态注册的广播接收者只要 app 在系统中运行则一直可以接收到广播消息,动态注册的广播接收者当注册的 Activity 或者 Serv ...

  2. dubbo的启动方法

    Dubbo服务的运行方式: 1.使用Servlet容器运行(Tomcat.Jetty等)----不可取 缺点:增加复杂性(端口.管理) 浪费资源(内存)2.自建Main方法类来运行(spring容器) ...

  3. MySQL 树形结构 根据指定节点 获取其所有父节点序列

    背景说明 需求:MySQL树形结构, 根据指定的节点,获取其所有父节点序列. 问题分析 1.可以使用类似Java这种面向对象的语言,对节点集合进行逻辑处理,获取父节点. 2.直接自定义MySQL函数  ...

  4. os, sys, stat 模块使用

    1.设置文件权限: 注意:设置权限之前要导入下面三个模块,否则报错, import os, sys, stat os.chmod("/home/a.txt", stat.S_IXG ...

  5. Go语言mgo使用情况

    文重点介绍mgo使用,仅简单介绍mongodb. mongodb特性   mongdb简单介绍 注意: 上图已经告知我们mongo不支持事务,在开发项目应用时,想要保证数据的完整性请考虑关系型数据库( ...

  6. P3611 【[USACO17JAN]Cow Dance Show奶牛舞蹈】

    想了一下还是不发以前做过的水题了,意义也不是很大,现在的话大概只有洛谷黄题以上才会收录了哦~~~ 喵了个咪的题面~~ 洛谷题解dalao不是P党就是优先队列,看的我作为一个新手蒟蒻好慌啊... 这题用 ...

  7. Centos7的引导顺序

    1.UEFI或BIOS初始化,运行POST开机自检(Power   On  Self   Test) 2.选择启动设备 3.引导装载程序grub2 4.加载装载程序的配置文件:/etc/grub.d/ ...

  8. XCode8.3真机调试设置

    本文使用XCode8.3.3 首先XCode->Preferncs,进入下面的界面 点击左下角“+”号,并输入账号,然后点击Manage Certificates,左下角添加IOS develo ...

  9. 初步学习jquery学习笔记(四)

    Jquery HTML Jquery 捕获内容 什么是dom? DOM = Document Object Model(文档对象模型) 获取内容 text()获取所选元素的文本内容 html()获取所 ...

  10. python爬取天气后报网

    前言 大二下学期的大数据技术导论课上由于需要获取数据进行分析,我决定学习python爬虫来获取数据.由于对于数据需求量相对较大,我最终选择爬取 天气后报网,该网站可以查询到全国各地多年的数据,而且相对 ...