【筆記】jstree插件的基本使用

官網地址：https://www.jstree.com/

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

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

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

1、拼接子節點格式

// Expected format of the node (there are no required fields)
{
  id          : "string" // will be autogenerated if omitted
  text        : "string" // node text
  icon        : "string" // string for custom
  state       : {
    opened    : boolean  // is the node open
    disabled  : boolean  // is the node disabled
    selected  : boolean  // is the node selected
  },
  children    : []  // array of strings or objects
  li_attr     : {}  // attributes for the generated LI node
  a_attr      : {}  // attributes for the generated A node
}

2、根據父節點組裝，注：parent是父級節點，初始節點為 " # "      

// Alternative format of the node (id & parent are required)
{
  id          : "string" // required
  parent      : "string" // required
  text        : "string" // node text
  icon        : "string" // string for custom
  state       : {
    opened    : boolean  // is the node open
    disabled  : boolean  // is the node disabled
    selected  : boolean  // is the node selected
  },
  li_attr     : {}  // attributes for the generated LI node
  a_attr      : {}  // attributes for the generated A node
}

html

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

初始化js

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

添加右鍵點擊自定義菜單

            $('#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);
                });
            });

 

初始化完成后展開所有節點

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

獲取當前選擇的節點

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