树 插件 ztree 的基本用法

因业务须要 用到 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[0].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); }); }

 

获得渲染效果

 

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

这里用到了

function zTreeOnClick(event, treeId, treeNode) {

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

}

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

这里用到了 addNodes （详细看IPA文档）

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