需要jstree具有拖拽功能需要在加载jstree时添加dnd插件,具体看代码:
$('**').jstree({//plugins-各种jstree的插件引入,展示树的多样性
'plugins' : [ "dnd", "types", "wholerow" ],
'core' : {"check_callback" : true,//在对树进行改变时,check_callback是必须设置为true;'data' :{'url' : 'modulemng/list',dataType:'json'}
},
//types-对树的节点进行设置,包括子节点type、个数
'types' : {"#" : {"max_children" : 1}
}
});
使用dnd插件后,大家估计都在想其回调函数是dnd插件中的,就会去找jstree API中的dnd插件事件,然后发现怎么绑定到tree都绑定不上。仔细看API才发现,dnd插件的回调事件是绑定到document上的:
$(document).on('dnd_stop.vakata',function(e,data){});
这样,当节点拖拽后就能触发此方法,但仔细一看data传回来的参数,晕了。
正在抓狂的时候发现有个move_node.jstree回调函数,这个函数是绑定在jstree上的,而且返回来的data参数:
这些参数已足够我们进行数据库操作了,而且简单明了。
我的代码是:
$( "#module_tree" ) .on('move_node.jstree', function(e,data){console.info(data);jQuery.post("modulemng/dndmodule",{ id : data.node.id, parent : data.parent,position:data.position},function(data,status){ alert("Data: " + data + "\nStatus: " + status);}, 'json');}).jstree({//plugins-各种jstree的插件引入,展示树的多样性'plugins' : [ "dnd", "types", "wholerow" ],'core' : {"check_callback" : true,//在对树进行改变时,check_callback是必须设置为true;'data' :{'url' : 'modulemng/list',dataType:'json'}},//types-对树的节点进行设置,包括子节点type、个数'types' : {"#" : {"max_children" : 1}} });});
传回当前节点ID,父节点ID和相应的位置position即可。