官網(wǎng)地址：https://www.jstree.com/

json返回參數(shù)格式：推薦第二種方式 不需要在重新拼接返回格式

?不刷新頁面重新初始化?jstree時使用：$.jstree.destroy() ?注銷已初始化的數(shù)據(jù)

?虛線設置：在?plugins中添加wholerow。如：?plugins: ["wholerow","contextmenu"] ??contextmenu是快捷菜單配置

1、拼接子節(jié)點格式

// Expected format of the node (there are no required fields) {id : "string" // will be autogenerated if omittedtext : "string" // node texticon : "string" // string for custom state : {opened : boolean // is the node opendisabled : boolean // is the node disabledselected : boolean // is the node selected },children : [] // array of strings or objectsli_attr : {} // attributes for the generated LI nodea_attr : {} // attributes for the generated A node }

2、根據(jù)父節(jié)點組裝，注：parent是父級節(jié)點，初始節(jié)點為 " # " ? ? ?

// Alternative format of the node (id & parent are required) {id : "string" // requiredparent : "string" // requiredtext : "string" // node texticon : "string" // string for custom state : {opened : boolean // is the node opendisabled : boolean // is the node disabledselected : boolean // is the node selected },li_attr : {} // attributes for the generated LI nodea_attr : {} // attributes for the generated A node }

html

<div id="treeDiv" > </div>

初始化js

$('#treeDiv').jstree({'core': {'data': data//返回的數(shù)據(jù) },});

添加右鍵點擊自定義菜單

$('#treeDiv').jstree({'core': {'data': data},plugins: ["contextmenu"],"contextmenu": {"items": {"create": null,"rename": null,"remove": null,"ccp": null,"add": {"label": "add","action": function (obj) {alert("add operation--clickedNode's id is:" + obj);}},"delete": {"label": "delete","action": function (obj) {alert("add operation--clickedNode's id is:" + obj);}}}}});

虛線設置：在?plugins中添加wholerow。如：?plugins: ["wholerow","contextmenu"] ??contextmenu是快捷菜單配置

拖動效果

$("#treeDiv").jstree({"core": {"check_callback": true,"data":data},"plugins": ["dnd"]});

?拖動返回事件

$("#treeDiv").on('move_node.jstree', function (e, data) {$.post("modulemng/dndmodule", {id: data.node.id,parent: data.parent,position: data.position}, function (data, status) {alert("Data: " + data + "\nStatus: " + status);});});

?

初始化完成后展開所有節(jié)點

$("#treeDiv").on("ready.jstree", function (e, data) { //樹創(chuàng)建完成事件data.instance.open_all(); //展開所有節(jié)點});

獲取當前選擇的節(jié)點

$("#treeDiv").on('changed.jstree', function (e, data) { //選中節(jié)點改變事件var node = data.instance.get_node(data.selected[0]); //獲取選中的節(jié)點});

?

轉載于:https://www.cnblogs.com/miskis/p/6118554.html

總結

以上是生活随笔為你收集整理的【笔记】jstree插件的基本使用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。