easyui树节点拖拽排序的存储过程
easyui树的拖拽排序功能
easyui树中有拖拽功能
树结构如下:
一个行政区域对应一个单位,一个单位对应多个部门,每个部门下有相关人员,功能要求:
(1)行政区域没有子节点,点击text加载部门;(2)点击部门的text,如果有下级部门则加载部门,没有则加载人员;(3)树都有拖拽排序功能
1、前台页面:
<script type="text/javascript" src = "js/lib/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src = "js/lib/jquery.easyui.min.js"></script>
<div data-options="region:'center'">
<ul id="orgs_tree" class="easyui-tree" ></ul>
</div>
var orgs_tree_default = {
url : 'servlet/SearchServlet?dispatch=0',
animate : true,
onClick:function(node){
var url = "servlet/SearchServlet?dispatch=1";//默认加载地区的树
var isDeptTree = false;
var unit_id ;
//根据行政区划获取单位列表
$.getJSON(url,{regions_id:node.attributes.regions_id},function(data){
if(data.length > ){
}else if(data.length == ){
}else{
//点击部门树的text,加载树
$("#dept_tree").tree({
url:"servlet/SearchServlet?dispatch=2&unit_id=" + unit_id+"&id=0", //默认加载部门的树
onBeforeExpand:function(node,param){
$("#dept_tree").tree("options").url="servlet/SearchServlet?dispatch=2&unit_id=" + unit_id+"&id="+node.id;
},
onSelect:function(node){ //当点击text的时候,展开子节点
$(this).tree("expand",node.target);
}
});
}
});
},
onDrop:function(target, source, point){ //行政区域树的拖拽功能
var node = $("#orgs_tree").tree("getNode",target); // 将DOM对象转换为node
//组装参数
var param = {
//目标节点属性
targetId : node.attributes.regions_id ,
targetSort : node.attributes.regions_sort ,
//源节点属性
sourceId : source.attributes.regions_id ,
sourceSort : source.attributes.regions_sort,
//操作方式3种,append:变更父节点,top:平级-上 bottom:平级-下
point : point};
//更新数据库,这个后台需要用到存储过程
var url = "servlet/ManagerServlet?dispatch=0";
$.post(url,param,function(data){
alert("success");
});
}
};
2、java后台调用方法
easyui树节点拖拽排序的存储过程的更多相关文章
- zTree的拖拽排序
ztree本身是可以支持拖拽的,但是却没有找到明确的支持拖拽的排序,也就是说,在拖拽过程中,需要自定义维护拖拽后的顺序并保存至后台. 在这样一个比较常规的需求情况下,网上也有朋友给出了一些解决方案,比 ...
- jQuery可拖拽排序列表jquery-sortable-lists
jquery-sortable-lists可以通过鼠标进行拖动排列树型菜单,可以定义某个列表元素是否拖动,拖动后回调,点击可以折叠树型结点,可以用来在后台模仿wordpress后台拖动菜单,实现多级菜 ...
- ztree使用系列四(ztree实现同级拖拽排序并将排序结果保存数据库)
ztree这个系列的最后一篇,也是ztree功能强大的体现之中的一个--排序功能. ztree能够实现全部节点之间任意的拖拽排序功能.我这里依据须要实现了仅仅同意同级之间任意拖拽排序,事实上原理都一样 ...
- jstree 节点拖拽保存数据库
需要jstree具有拖拽功能需要在加载jstree时添加dnd插件,具体看代码: $('**').jstree({ //plugins-各种jstree的插件引入,展示树的多样性 'plugins' ...
- js 实现拖拽排序
<!DOCTYPE> <html lang="zh-cn"> <head> <meta http-equiv="Content- ...
- html5 Sortable.js 拖拽排序源码分析
最近公司项目经常用到一个拖拽 Sortable.js插件,所以有空的时候看了 Sortable.js 源码,总共1300多行这样,写的挺完美的. 本帖属于原创,转载请出名出处. 官网http:// ...
- vue列表拖拽排序功能实现
1.实现目标:目标是输入一个数组,生成一个列表:通过拖拽排序,拖拽结束后输出一个经过排序的数组. 2.实现思路: 2.1是使用HTML5的drag功能来实现,每次拖拽时直接操作Dom节点排序,拖拽结束 ...
- Vue 表单拖拽排序
Vue table表单拖拽 业务需求: 因为数据展示使用的是 elementUI 的 Table进行数据展示的,现在的需求是通过拖拽表单进行表单排序.同时,动态修改表单中的数据排列顺序.查阅了好多资料 ...
- vue实现拖拽排序
基于vue实现列表拖拽排序的效果 在日常开发中,特别是管理端,经常会遇到要实现拖拽排序的效果:这里提供一种简单的实现方案. 此例子基于vuecli3 首先,我们先了解一下js原生拖动事件: 在拖动目标 ...
随机推荐
- android调用其他apk的activity
<img src="https://img-blog.csdn.net/20160322114625025" alt="" />启动另一个apk的工 ...
- JS实现 类的 1.判断 2.添加 3.删除 4切换
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Eclipse - lombok的@Slf4j和@Data无效
问题与分析 最近开始学习spring-boot框架,我用的是Eclipse,然后发现在使用到了lombok的@Data注解时,Eclipse会编译错误.@Data的作用是自动生成toString方法和 ...
- 8. 字符串转换整数 (atoi)
8. 字符串转换整数 (atoi) 方法一 import re import math class Solution(object): def myAtoi(self, str): "&qu ...
- __contains__, __len__,__reversed__
__contains__():当使用in,not in 对象的时候 调用(not in 是在in完成后再取反,实际上还是in操作) class A(object): def __init__(self ...
- laravel使用swoole
参考 参考2 另外主要用到artisan 首先创建SwooleCommand.php <?php namespace App\Console\Commands; use App\Http\Con ...
- Day2课后作业:购物车简单版
PRODUCT_LIST = [ ['iphone7',6500], ['macbook',12000], ['pythonbook',66], ['bike',999], ['coffee',31] ...
- eclipse各种操作指南
一.设置代码自动补全 1.设置java代码自动补全 Auto activation delay(ms):0 Auto activation trigger for java : .abcdefghij ...
- 简单了解junit的使用
普通使用: 在没有用测试框架之前,我们要用一个main方法来跑代码,而有了像junit这样的测试框架后,就可以不用次次写个main方法了. 直接上代码,注释里有说明: package com.stuP ...
- JavaScript Allongé 第一呷 :基础函数 (2)
啊!我想要有一个参数 到现在为止,我们已经了解了没有参数的函数.只说我们的函数没有任何参数,甚至还没说参数是什么.大多数程序员非常熟悉参数,中学数学就讨论这个了.所以你知道他们是什么,而我也知道你知道 ...