• 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 + "
    Status: " + 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即可。

  • 相关阅读:
    关系数据理论
    JavaScript语言——对象
    网络编程基础入门级
    数据库加快查询速度索引
    C/C++随机函数的生成(转载)
    sql连接查询
    深入浅出HTTP请求
    17搜索如何抓全网页
    搜索引擎之百度一下
    搜索引擎之中搜
  • 原文地址:https://www.cnblogs.com/liveandevil/p/3874792.html
Copyright © 2020-2023  润新知