ztree基本使用

上图为敬。

实现对目录树的编辑、新增、删除、拖拽更改父目录4个功能，会在高级功能里详细讲。

一、基本文件引入

在官网上下载的ztree包的js文件中找到jquery.ztree.all.js ，

和css文件中的 metroStyle文件夹(注意是整个文件夹），

将这两个文件在自己的Html文件中引用（CSS放在html的Head中，js放在HTML的body末尾），注意相对位置。

此外还需要jquery.js文件。

二、ztree初始化

首先，去ztree官网上看例子和api。ztree的官网API真的写的很好，很实用，不吹不黑。

那这里，我先用如下的示例数据:

var zNodes = [

{

"id": 0,

"categoryId": "100",

"categoryName": "我的目录",

"parentId": -1,

"categoryLevel": 1,

"createTime": "2017-12-14 21:05:35.0",

"creator": "1",

"typeId": "0",

"bmID": "",

"fullbmID": ""

},

{

"id": 265,

"categoryId": "1",

"categoryName": "北京1",

"parentId": 0,

"categoryLevel": 1,

"createTime": "2017-12-14 21:05:35.0",

"creator":0,

"typeId": null,

"bmID": "BJZZX",

"fullbmID": "BJZZX"

},

{

"id": 266,

"categoryId": "2",

"categoryName": "北京2",

"parentId": -1,

"categoryLevel": 1,

"createTime": "2017-12-14 21:05:35.0",

"creator":0,

"typeId": null,

"bmID": "BJZZX",

"fullbmID": "BJZZX"

},

{

"id": 267,

"categoryId": "3",

"categoryName": "北京分公司3",

"parentId": 0,

"categoryLevel": 1,

"createTime": "2017-12-14 21:05:35.0",

"creator": "7",

"typeId": null,

"bmID": "BJZZX",

"fullbmID": "BJZZX"

},

{

"id": 268,

"categoryId": "2",

"categoryName": "北京分公司4",

"parentId": 0,

"categoryLevel": 1,

"createTime": "2017-12-14 21:05:35.0",

"creator": "7",

"typeId": null,

"bmID": "BJZZX",

"fullbmID": "BJZZX"

}];

我需要根据每个节点的id和parentId来定义树结构，显示categoryName。

data: {

key: {

name: "categoryName",

},

simpleData: {

enable: true,

idKey: "id",

pIdKey: "parentId",

rootPId: "0"

}

},

此外，你还可以自选一些需要的功能：

edit: {

enable: true,

editNameSelectAll: true,

showLine: true,

selectedMulti: false,

},

view: {

dblClickExpand: false,

showLine: true,

selectedMulti: false,

},

下面贴代码：

js:

var zTree;

var setting = {

edit: {

enable: true,

editNameSelectAll: true,

showLine: true,

selectedMulti: false,

},

view: {

dblClickExpand: false,

showLine: true,

selectedMulti: false,

},

data: {

key: {

name: "categoryName",

},

simpleData: {

enable: true,

idKey: "id",

pIdKey: "parentId",

rootPId: "0"

}

},

callback: {

// beforeRemove: beforeRemove,

// onRemove: onRemove,

// beforeRename: beforeRename,

// onRename: onRename,

// beforeDrag: beforeDrag,

// beforeDrop: beforeDrop,

// onDrop: zTreeOnDrop,

// beforeClick: beforeClick,

// onClick: zTreeOnClick

// }

}

}

var zNodes = [

{

"id" : 0,

"categoryId" : "100",

"categoryName" : "我的目录",

"parentId" : - 1,

"categoryLevel" : 1,

"createTime" : "2017-12-14 21:05:35.0",

"creator" : "1",

"typeId" : "0",

"bmID" : "",

"fullbmID" : ""

},

{

"id" : 265,

"categoryId" : "1",

"categoryName" : "北京1",

"parentId" : 0,

"categoryLevel" : 1,

"createTime" : "2017-12-14 21:05:35.0",

"creator" : 0,

"typeId" : null,

"bmID" : "BJZZX",

"fullbmID" : "BJZZX"

},

{

"id" : 266,

"categoryId" : "2",

"categoryName" : "北京2",

"parentId" : - 1,

"categoryLevel" : 1,

"createTime" : "2017-12-14 21:05:35.0",

"creator" : 0,

"typeId" : null,

"bmID" : "BJZZX",

"fullbmID" : "BJZZX"

},

{

"id" : 267,

"categoryId" : "3",

"categoryName" : "北京分公司3",

"parentId" : 0,

"categoryLevel" : 1,

"createTime" : "2017-12-14 21:05:35.0",

"creator" : "7",

"typeId" : null,

"bmID" : "BJZZX",

"fullbmID" : "BJZZX"

},

{

"id" : 268,

"categoryId" : "2",

"categoryName" : "北京分公司4",

"parentId" : 0,

"categoryLevel" : 1,

"createTime" : "2017-12-14 21:05:35.0",

"creator" : "7",

"typeId" : null,

"bmID" : "BJZZX",

"fullbmID" : "BJZZX"

}];

$( document). ready( function() {

$. fn. zTree. init( $( "#first"), setting, zNodes);

var zTree = $. fn. zTree. getZTreeObj( "tree");

// turn_tnodeto_Data(zNodes,);

// console.log(GlobalTreeNode);

// table_show_tNodes(GlobalTreeNode);

});

html:

< html >

< head >

<!-- ztree -->

< link rel= "stylesheet" type= "text/css" href= "./css//metroStyle/metroStyle.css" />

</ head >

< body >

< p >ztree基本使用 </ p >

< div class= "box-body" >

< ul id= "first" class= "ztree" style= "width:100%" ></ ul >

</ div >

</ body >

</ html >

<!-- <script type="text/javascript" src="./forin.js"> </script> -->

< script type= "text/javascript" src= "./jquery.min.js" > < / script >

< script type= "text/javascript" src= "./jquery.ztree.all.min.js" > < / script >

< script type= "text/javascript" src= "./myztree.js" > < / script >

效果图：

data: {simpleData: {enable: true,idKey: "id",pIdKey: "pId",rootPId: 0}}};