Ztree uses Series 2 (some ztree functions and demo are integrated)

The ztree official website has detailed APIs and demo demos. I will not detail them here. I will only describe some of the functions used.

1. Several js files used

Jquery-1.4.4.min.js (jQuery's core js)

Jquery. ztree. core-3.5.js (core js of ztree)

Jquery. ztree. excheck-3.5.js (check box function js of ztree)

Jquery.ztree.exe dit-3.5.js (ztree editing function js)

2. css files used

ZTreeStyle.css (only this css file controls the ztree style. Of course, you can extend the style you need in this file)

3. images used

ZTree v3.x combines the main icons into one image and displays the icons in image cutting mode.

4. Data Definition

Use the simple data format ({"id": 1, "pId": 0, "name": "test1 "})

5. The demo code of the page is as follows:

 <Script type = "text/javascript" src = "js/jquery. ztree. core-3.5.js & gt; </script & gt; <script type = "text/javascript" src = "js/jquery. ztree. excheck-3.5.js "> </script> <script type =" text/javascript "src =" js/jquery.ztree.exe dit-3.5.js "> </script> <script type =" text/javascript "src = "js/jquery-1.4.4.min.js"> </script> <script type = "text/javascript"> var dragId; var zTree_Menu; var setting = {view: {addHoverDom: addHoverDom, r EmoveHoverDom: removeHoverDom, selectedMulti: false, showLine: false, selectedMulti: false, showIcon: false}, edit: {enable: true, showRemoveBtn: setRemoveBtn, removeTitle: "delete category ", renameTitle: "Edit category", drag: {prev: true, next: true, inner: false}, editNameSelectAll: true}, data: {simpleData: {enable: true }}, callback: {beforeDrag: beforeDrag, beforeClick: beforeClick, beforeEditName: beforeEditName, beforeRemove: BeforeRemove, beforeRename: beforeRename, onRemove: onRemove, onRename: onRename, beforeDrop: beforeDrop}; // use the simple data mode (Array) var zNodes = [{id: 1, pId: 0, name: "drag 1" },{ id: 11, pId: 1, name: "drag 1-1" },{ id: 111, pId: 11, name: "drag 1-1-1" },{ id: 12, pId: 1, name: "drag 1-2" },{ id: 121, pId: 12, name: "drag 1-2-1" },{ id: 122, pId: 12, name: "drag 1-2-2" },{ id: 1221, pId: 121, name: "drag 1-2-2-1"}, {id: 123, pId: 12, name: "drag 1- 2-3 "},{ id: 1231, pId: 123, name:" drag 1-2-3-1 "},{ id: 1232, pId: 123, name: "drag 1-2-3-2" },{ id: 1233, pId: 123, name: "drag 1-2-3-3" },{ id: 2, pId: 0, name: "drag 2" },{ id: 21, pId: 2, name: "drag 2-1" },{ id: 22, pId: 2, name: "drag 2-2" },{ id: 23, pId: 2, name: "drag 2-3" },{ id: 3, pId: 0, name: "drag 3" },{ id: 31, pId: 3, name: "drag 3-1" },{ id: 32, pId: 3, name: "drag 3-2" },{ id: 33, pId: 3, name: "drag 3-3"}]; function beforeDrag (treeId, treeN Odes) {// used to capture the Event Callback function return false before the node is dragged;} function beforeEditName (treeId, treeNode) {// used to capture the click Event of the node editing button, determine whether to enter the name editing status var zTree = $ Based on the return value. fn. zTree. getZTreeObj ("treeDemo"); zTree. selectNode (treeNode); return true;} function beforeRemove (treeId, treeNode) {// used to capture the Event Callback function before the node is deleted, determine whether to allow the delete operation var zTree =$ Based on the return value. fn. zTree. getZTreeObj ("treeDemo"); zTree. selectNode (treeNode); return confirm ("confirm to delete category --" + t ReeNode. name +? ");} Function onRemove (e, treeId, treeNode) {// event callback function used to capture deleted nodes} function beforeRename (treeId, treeNode, newName) {// Event Callback Function before updating node name data, and determines whether to allow the operation if (newName. length = 0) {alert ("category name cannot be blank. "); var zTree = $. fn. zTree. getZTreeObj ("treeDemo"); setTimeout (function () {zTree. editName (treeNode)}, 10); return false;} return true;} function onRename (e, treeId, treeNode) {// used to capture the Event Callback Function after the node editing name ends} var newCou Nt = 1; function addHoverDom (treeId, treeNode) {// used to display the User-Defined control var sObj =$ ("#" + treeNode. tId + "_ span"); if (treeNode. editNameFlag | $ ("# addBtn _" + treeNode. tId ). length> 0) return; var addStr = ""; sObj. after (addStr); var btn = $ ("# addBtn _" + treeNode. tId); if (btn) btn. bind ("click", function () {var zTree = $. fn. zTree. getZTreeObj ("treeDemo"); zTree. addNodes (treeNode, {id :( 100 + newCount), pId: treeN Ode. id, name: "new node" + (newCount ++)}); return false ;});} function setRemoveBtn (treeId, treeNode) {// remove the deletion function from the parent category. return! TreeNode. isParent;} function removeHoverDom (treeId, treeNode) {$ ("# addBtn _" + treeNode. tId ). unbind (). remove () ;}; function beforeDrag (treeId, treeNodes) {// execute for (var I = 0, l = treeNodes. length; I
               
  Classification Management
                                                       
  
 
                                             
              
 

The above code can be run directly, but you need to download the relevant js, css and images, you can directly download them on the ztree official website.