因业务需要 用到 ztree 插件

第一次用tree插件上手有点难度

官网 http://www.treejs.cn/v3/main.php#_zTreeInfo

第一步:初始化树,树的所有数据从后台请求所得

//首页加载左边树形AJAX
$.ajax({
dataType:'json',
type:'post',
url:'http://192.168.0.51:8184/wd-service/api/dict/findParentDict',
//请求成功===============
success:function(data){
console.log(data)
var list=data.data
console.log(data.data[].parentId)
zNodes=list
// tres插件
var setting = {
view: {
addHoverDom: false, //去掉添加图标
removeHoverDom: false, //去掉删除图标
selectedMulti: false,
addDiyDom: true,
dblClickExpand: false,//屏蔽双击
isSilent : false
},
check: {
enable: false
},
data: {
simpleData: { //简单数据模式
enable: true,
idKey: "id",
pIdKey: "pid",
rootPId: "",
}
},
edit: {
enable: false,
removeTitle : "删除节点",
},
callback:{
onClick:zTreeOnClick,
},
async:{
enable:true,
},
};
$.fn.zTree.init($("#treeDemo"), setting,zNodes); //初始化树形结构 ,treeDemo是树容器

初始化根节点

    var zNodes
var zTreeObj;
// 初始化根节点
function initTree() {
$.get(basePath + "/design/detain/initNode?type=1", function(data) {
// 设置父节点不显示checkbox
data.returnData.node.nocheck = true;
zTreeObj = $.fn.zTree.init($("#zTree"), setting,
data.returnData.node);
});
}

得到渲染效果

二、单击树节点时向后台发起数据请求

这里用到了

function zTreeOnClick(event, treeId, treeNode) {

  console.log(treeNode.id)  //当单击节点的时候会输出节点的id

}

三、动态添加节点,当添加一天数据节点的时候,在不刷新页面的前提下更新节点

这里用到了 addNodes (详细看IPA文档)

//刷新树==============================
var name=data.data[].name //数据从后台请求得来
console.log(name)
var treeObj = $.fn.zTree.getZTreeObj("treeDemo"); //treeDemo是树所在容器
var selectedNode = treeObj.getSelectedNodes(); //所选择的节点
console.log(selectedNode[])
var newNode = {name:name,id:data.data[].id}; //新增的节点的名称name 和 节点id
newNode = treeObj.addNodes(selectedNode[],newNode);
console.log(newNode)

树 插件 ztree 的基本用法的更多相关文章

  1. JQuery树插件——ztree

    API与Demo:http://www.treejs.cn/v3/api.php 使用插件,第一步依然是引入: <link rel="stylesheet" href=&qu ...

  2. JQ树插件 — zTree笔记

    1.zTree作者很贴心的为使用者将不同功能的代码封装成不同的文件,方便大家尽量减少加载的代码量,如果基本全用到,则不必一个个引用,有一个文件“jquery.ztree.all.js”,包含了所有.如 ...

  3. easyui&8Jquery ztree树插件

    7Jquery easyui前台UI框架 开发包: 7.1Layout页面布局 将课后资料中后台系统前台页面素材导入项目中 1.导入Jquery,easyui相关js,css文件 <link r ...

  4. zTree 优秀的jquery树插件

    zTree 优秀的jquery树插件,文档详细,渲染快 使用方法: 1.引用zTree的js和css文件 <link href="~/Content/zTree_v3/css/zTre ...

  5. 树结构数据的展示和编辑-zTree树插件的简单使用

    最近在项目当中遇到一个需求,需要以树结构的方式展示一些数据,并可对每一个树节点做内容的编辑以及树节点的添加和删除,刚好听说有zTree这个插件可以实现这样的需求,所以在项目的这个需求完成之后,在博客里 ...

  6. JQuery Ztree 树插件配置与应用小结

    JQuery Ztree 树插件配置与应用小结 by:授客 QQ:1033553122 测试环境 Win7 jquery-3.2.1.min.js 下载地址: https://gitee.com/is ...

  7. zTree -- jQuery 树插件 使用方法与例子

    简介 zTree 是一个依靠 jQuery 实现的多功能 "树插件". 网址:http://www.ztree.me/v3/main.php#_zTreeInfo 上面的网址里有z ...

  8. js组件在线编辑器插件、图表库插件、文件树插件

    在线编辑器插件: 一.kindeditor 二.UEditor 图表库插件: 一.echart 二.highchart 文件树插件: 一.zTree -- jQuery 树插件 http://www. ...

  9. ASP.NET MVC jQuery 树插件在项目中使用方法(一)

    jsTree是一个 基于jQuery的Tree控件.支持XML,JSON,Html三种数据源.提供创建,重命名,移动,删除,拖"放节点操作.可以自己自定义创建,删 除,嵌套,重命名,选择节点 ...

随机推荐

  1. 一年读100本书---HHR,NZJ---19年最后4个月

    那些自律到极致的人,都拥有了开挂的人生.生物钟,绝对一致之后,一切都会很高效. 19年最后一个季度的HHR计划:还剩下3个月的时间,主要搞定几件事情:创业(以太一堂,混沌大学),工作能力(推荐算法工程 ...

  2. 我的 Python 编码规范

    python 文件的组成 为了便于描述,先上一个 demo #!/usr/bin/env python # -*- coding: utf-8 -*- """通常这里是关 ...

  3. 操作系统OS - 阻塞(Blocking)非阻塞(Non-Blocking)与同步(Synchronous)异步(Asynchronous)

    参考: http://blog.jobbole.com/103290/ https://www.zhihu.com/question/19732473/answer/23434554 http://b ...

  4. Django中url name

    花了好长时间才明白这个name参数的含义.便写下来了备忘 当我们在url的时候,一般情况下都是使用很明确的url地址.如在网页里面使用<a href="/login"> ...

  5. 解析-analysis

    解析-analysis 1.      解析-analysis 可以理解为分词. 解析由解析器——analyzer执行,解析器包括内置和用户自定义两种. 1.1.    解析器 1.1.1.   内置 ...

  6. java实现文字转语音功能(仅Windows)

    一.pom.xml引入jar包依赖 <!-- https://mvnrepository.com/artifact/com.jacob/jacob 文字转语音 --> <depend ...

  7. EAP认证

    EAP信息交换: 上图中展示的是OTP(一次性密码)实现EAP交换过程,具体的EAP交换过程如下: 步骤1:请求方向认证方发送EAPOL-Start消息,通知对方已经做到了认证准备(注意:若会话由认证 ...

  8. ANSYS布尔运算APDL

    目录 1.交运算 2.加运算 3.减运算 4.分割 5. 搭接 6. 互分 6.粘结 1.交运算 交运算的结果是由每个初始图元的共同部分,形成一个新的图元. 命令 功能 备注 LINL 线与线的交 A ...

  9. Postgresql查询表和表结构

    查询表名 SELECT tablename FROM pg_tables WHERE tablename NOT LIKE 'pg%' AND tablename NOT LIKE 'sql_%' O ...

  10. Python基础入门语法1

    PY的交换值的方法 x.y = y.x PY既具有动态脚本的特性,又有面向对象的特性 PY的缺点: 编译型的语言(C++,C):通过编译器进行编译成机器码,越接近底层,开发效率低 解释型代码:PY和J ...