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即可。
jstree 节点拖拽保存数据库的更多相关文章
- TREEVIEW节点拖拽
http://files.cnblogs.com/xe2011/TreeView_Drag_and_Drop.rar 假设把A节点往B节点上拖拽 那么 A 为Node1,B为Node2 ...
- easyui树节点拖拽排序的存储过程
easyui树的拖拽排序功能 easyui树中有拖拽功能 树结构如下: 一个行政区域对应一个单位,一个单位对应多个部门,每个部门下有相关人员,功能要求: (1)行政区域没有子节点,点击text加载部门 ...
- TreeView 节点拖拽
public Form1() { InitializeComponent(); treeView1.AllowDrop = true; treeView1.ItemDrag += new ItemDr ...
- twaver拓扑图拖拽后保存json数据
功能描述:拓扑图.对节点进行拖拽,序列化获取拓扑图信息,保存到本地localStorage,刷新页面,执行反序列化,从本地获取之前保存的数据,展现之前拖拽后的拓扑 拓展:此处存储用的是web本地存储l ...
- C# TreeView 拖拽节点到另一个容器Panel中简单实现
C# TreeView 拖拽节点到另一个容器Panel中简单实现 用了这么久C#拖拽功能一直没有用到也就没用过,今天因为项目需要,领导特地给我简单讲解了下拖拽功能,真是的大师讲解一点通啊.特地写一篇博 ...
- html5 Sortable.js 拖拽排序源码分析
最近公司项目经常用到一个拖拽 Sortable.js插件,所以有空的时候看了 Sortable.js 源码,总共1300多行这样,写的挺完美的. 本帖属于原创,转载请出名出处. 官网http:// ...
- Dev GridView行拖拽
http://blog.csdn.net/keyrainie/article/details/8513802 http://www.cnblogs.com/qq4004229/archive/2012 ...
- TREEVIEW拖拽对应修改目录
附件:http://files.cnblogs.com/xe2011/TreeView_Drag_Directory%E6%93%8D%E4%BD%9C.rar TREEVIEW拖拽对应修改目 ...
- Jquery实现可拖拽的树菜单
效果图例如以下所看到的:下载地址http://download.csdn.net/detail/javaquentin/8290417 <html xmlns="http://www. ...
随机推荐
- js获取天气
我们经常看到有的网站显示天气信息,它是怎么做出来的呢?今天就来分享一些关于js调用天气API的几种做法. 网上也能找到很多种方法,但是一般都是免费的不好用,好用的不免费. 以前用过新浪的天气api,查 ...
- js跳转页面方法
<span id="tiao">3</span><a href="javascript:countDown"></ ...
- Action配置
Action是一个逻辑控制器,并不直接对浏览器生成响应,而是返回指定逻辑视图(一个字符串). 不推荐在Action的name属性值中使用点(.)和中划线(-),有可能会引发一些未知异常. 1使用A ...
- js 中对象属性的特性
数据属性: 数据属性包含一个数据值的位置,在这个位置可以读取和写入值. 4个描述的行为特性: writable 表示能否修改属性的值.默认为true Enumerable 表示能否过过for in循 ...
- 关于js的callback回调函数的理解
回调函数的处理逻辑理解:所谓的回调函数处理逻辑,其实就是先将回调函数的代码 冻结(或者理解为闲置),接着将这个回调函数的代码放到回调函数管理器的队列里面. 待回调函数被触发调用的时候,对应的回调函数的 ...
- Day18 Django之路由系统、模板语言、Ajax、Model
一.路由系统 1.创建Django项目 django-admin startproject day18 cd day18 python3 manage.py startapp app01 2.app0 ...
- github避免每次输入账户密码
方法1: 显示所有隐藏目录,找到目录./git下的文件config文件,通过文本方式打开,在最前面添加如下两行.之后再次输入一次密码后就会记住账号密码. [credential] helper ...
- MDK —— configuration wizard
学习RTX 的时候发现RTX的配置文件可以MDK的图形界面来配置,感觉这个非常好,直观.方便.健壮,可以避免程序员写入错误的数据. 参考: µVision User's Guide->Uti ...
- dp 0-1背包问题
0-1背包的状态转换方程 f[i,j] = Max{ f[i-1,j-Wi]+Pi( j >= Wi ), f[i-1,j] } f[i,j]表示在前i件物品中选择若干件放在承重为 j 的背包 ...
- uoj164. 【清华集训2015】V 统计
坑爹题面:http://uoj.ac/problem/164 正常题面: 对于一个序列支持下列5个操作: 1.区间加x 2.区间减x并与0取max 3.区间覆盖 4.单点查询 5.单点历史最大值查询 ...