首页 > 代码库 > jstree 节点拖拽保存数据库
jstree 节点拖拽保存数据库
需要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即可。
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。