【笔记】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]);  //获取选中的节点
            });