【笔记】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 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、根据父节点组装，注：parent是父级节点，初始节点为 " # "      

// 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//返回的数据 },});

添加右键点击自定义菜单

$('#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]); //获取选中的节点});

 

转载于:https://www.cnblogs.com/miskis/p/6118554.html

总结

以上是生活随笔为你收集整理的【笔记】jstree插件的基本使用的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。