需要jstree具有拖拽功能需要在加载jstree时添加dnd插件,具体看代码:

  1. $('**').jstree({
  2.  
  3. //plugins-各种jstree的插件引入,展示树的多样性
  4. 'plugins' : [ "dnd", "types", "wholerow" ],
  5. 'core' : {
  6. "check_callback" : true,//在对树进行改变时,check_callback是必须设置为true;
  7. 'data' :{
  8.    'url' : 'modulemng/list',
  9.    dataType:'json'
  10. }
  11. },
  12. //types-对树的节点进行设置,包括子节点type、个数
  13. 'types' : {
  14.   "#" : {
  15.     "max_children" : 1
  16.   }
  17. }
  18. });

使用dnd插件后,大家估计都在想其回调函数是dnd插件中的,就会去找jstree API中的dnd插件事件,然后发现怎么绑定到tree都绑定不上。仔细看API才发现,dnd插件的回调事件是绑定到document上的:

  1. $(document).on('dnd_stop.vakata',function(e,data){
  2.  
  3. });

这样,当节点拖拽后就能触发此方法,但仔细一看data传回来的参数,晕了。

正在抓狂的时候发现有个move_node.jstree回调函数,这个函数是绑定在jstree上的,而且返回来的data参数:

这些参数已足够我们进行数据库操作了,而且简单明了。

我的代码是:

  1. $( "#module_tree" )
  2. .on('move_node.jstree', function(e,data){
  3. console.info(data);
  4. jQuery.post("modulemng/dndmodule",
  5. {
  6. id : data.node.id,
  7. parent : data.parent,
  8. position:data.position
  9. },
  10. function(data,status){
  11. alert("Data: " + data + "\nStatus: " + status);
  12. }, 'json');
  13.  
  14. })
  15. .jstree({
  16. //plugins-各种jstree的插件引入,展示树的多样性
  17. 'plugins' : [ "dnd", "types", "wholerow" ],
  18. 'core' : {
  19. "check_callback" : true,//在对树进行改变时,check_callback是必须设置为true;
  20. 'data' :{
  21. 'url' : 'modulemng/list',
  22. dataType:'json'
  23. }
  24. },
  25. //types-对树的节点进行设置,包括子节点type、个数
  26. 'types' : {
  27. "#" : {
  28. "max_children" : 1
  29. }
  30. }
  31. });
  32. });

传回当前节点ID,父节点ID和相应的位置position即可。

jstree 节点拖拽保存数据库的更多相关文章

  1. TREEVIEW节点拖拽

    http://files.cnblogs.com/xe2011/TreeView_Drag_and_Drop.rar       假设把A节点往B节点上拖拽 那么  A 为Node1,B为Node2 ...

  2. easyui树节点拖拽排序的存储过程

    easyui树的拖拽排序功能 easyui树中有拖拽功能 树结构如下: 一个行政区域对应一个单位,一个单位对应多个部门,每个部门下有相关人员,功能要求: (1)行政区域没有子节点,点击text加载部门 ...

  3. TreeView 节点拖拽

    public Form1() { InitializeComponent(); treeView1.AllowDrop = true; treeView1.ItemDrag += new ItemDr ...

  4. twaver拓扑图拖拽后保存json数据

    功能描述:拓扑图.对节点进行拖拽,序列化获取拓扑图信息,保存到本地localStorage,刷新页面,执行反序列化,从本地获取之前保存的数据,展现之前拖拽后的拓扑 拓展:此处存储用的是web本地存储l ...

  5. C# TreeView 拖拽节点到另一个容器Panel中简单实现

    C# TreeView 拖拽节点到另一个容器Panel中简单实现 用了这么久C#拖拽功能一直没有用到也就没用过,今天因为项目需要,领导特地给我简单讲解了下拖拽功能,真是的大师讲解一点通啊.特地写一篇博 ...

  6. html5 Sortable.js 拖拽排序源码分析

    最近公司项目经常用到一个拖拽 Sortable.js插件,所以有空的时候看了 Sortable.js 源码,总共1300多行这样,写的挺完美的.   本帖属于原创,转载请出名出处. 官网http:// ...

  7. Dev GridView行拖拽

    http://blog.csdn.net/keyrainie/article/details/8513802 http://www.cnblogs.com/qq4004229/archive/2012 ...

  8. TREEVIEW拖拽对应修改目录

    附件:http://files.cnblogs.com/xe2011/TreeView_Drag_Directory%E6%93%8D%E4%BD%9C.rar     TREEVIEW拖拽对应修改目 ...

  9. Jquery实现可拖拽的树菜单

    效果图例如以下所看到的:下载地址http://download.csdn.net/detail/javaquentin/8290417 <html xmlns="http://www. ...

随机推荐

  1. 『重构--改善既有代码的设计』读书笔记----Change Reference to Value

    如果你有一个引用对象,很小且不可改变,而且不易管理,你就需要考虑将他改为一个值对象.在Change Value to Reference我们说过,要在引用对象和值对象之间做选择,有时候并不容易,有了重 ...

  2. 【实习记】2014-08-18使用curl排错http头的content-length

        总结一,用curl排错Content-Length设置错误,误导了客户端. 访问/cgi-bin/txproj_list时,firebug显示总是不多不少15秒,调试其他问题时郁闷. fire ...

  3. 【随记】关于List集合用Linq GroupBy分组过后的遍历小记

    List<LeaderKaoQin> lstLeader = new List<LeaderKaoQin>();//一个List集合IGrouping<string, L ...

  4. StandardServiceRegistryBuilder

    org.hibernate.boot.registry.StandardServiceRegistryBuilderhibernate4.3 Configuration cfg = new Confi ...

  5. javascript闭包传参和事件的循环绑定

    今天看到一个javascript的题目,按常理循环绑定事件,但是得到的结果却不是想要的. <a href="#">text</a><br>< ...

  6. js中对象调用对象中的方法

    var o = {a:"abc", b:{ c:function(param){ alert(this.a); //这里的this指向的不是o而是b,所以this是没有a属性的,这 ...

  7. JDK源码阅读(二) AbstractList

    package java.util; public abstract class AbstractList<E> extends AbstractCollection<E> i ...

  8. String、StringBuffer和StringBuilder——个人学习

    1.首先说一下他们的名称区别: String——字符串常量,StringBuffer——字符串变量(线程安全),StringBuilder——字符串变量(非线程安全) 从名称就可以很明显的看出他们的基 ...

  9. Linux下Java 编译运行说明

    命令行环境下Java编译运行 1. java的运行机制的基本概念: 源文件 也就是我们熟知的.java文件. 类文件  .class文件是编译器由.java文件编译而成.众所周知,Java的跨平台性在 ...

  10. spm使用之三spm应用实例

    spm 的init实际上是调用了grunt这个工具来实现一些交互式的提问和数据的获取. 看看npm就知道, npm有个命令叫init, 就是一样的交互式提问获取你要创建的nodejs的模块信息. sp ...