jstree
2019-12-17 13:55:09 来源:jiangwei 点击:870
阅前声明:我这里使用的jstree插件是与jQuery结合使用的,里面的语法(JQuery)可参考
var leftMenuTree = $('#LeftMenuTree'); //初始化jstree容器 leftMenuTree.jstree({ 'core': {//设置基础 'data': data.data, //基本数据赋值 'check_callback' : true, //1、开启树结构拖动 }, plugins: ['contextmenu','dnd'], //使用jstree 自带的插件
自定义鼠标右键菜单,当然了要记得在plugins中开启contextmenu插件,后才能使用
"contextmenu":{ "items":{ "edit" : { "label": "编辑", //标题 "action": function (obj) { //回调方法 }, "_disabled": false, "_class": "", //设置css "separator_before": false, "separator_after": true, "icon":'' //icon图标 } //多个重复即可... } }
点击jstree分支事件的绑定
leftMenuTree.bind("activate_node.jstree", function (obj, e) { e.node; //点击的当前节点的信息 });
开启jstree的拖动
第一步: 在core 下开启
'check_callback' : true, // 第一步
第二步:开启dnd插件
plugins: ['dnd'], //使用dnd插件
第三步:拖动后的回调方法(事件的绑定)
leftMenuTree.on('move_node.jstree', function(e,data){ console.info(data); })