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树节点拖拽排序的存储过程的更多相关文章

  1. zTree的拖拽排序

    ztree本身是可以支持拖拽的,但是却没有找到明确的支持拖拽的排序,也就是说,在拖拽过程中,需要自定义维护拖拽后的顺序并保存至后台. 在这样一个比较常规的需求情况下,网上也有朋友给出了一些解决方案,比 ...

  2. jQuery可拖拽排序列表jquery-sortable-lists

    jquery-sortable-lists可以通过鼠标进行拖动排列树型菜单,可以定义某个列表元素是否拖动,拖动后回调,点击可以折叠树型结点,可以用来在后台模仿wordpress后台拖动菜单,实现多级菜 ...

  3. ztree使用系列四(ztree实现同级拖拽排序并将排序结果保存数据库)

    ztree这个系列的最后一篇,也是ztree功能强大的体现之中的一个--排序功能. ztree能够实现全部节点之间任意的拖拽排序功能.我这里依据须要实现了仅仅同意同级之间任意拖拽排序,事实上原理都一样 ...

  4. jstree 节点拖拽保存数据库

    需要jstree具有拖拽功能需要在加载jstree时添加dnd插件,具体看代码: $('**').jstree({ //plugins-各种jstree的插件引入,展示树的多样性 'plugins' ...

  5. js 实现拖拽排序

    <!DOCTYPE> <html lang="zh-cn"> <head> <meta http-equiv="Content- ...

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

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

  7. vue列表拖拽排序功能实现

    1.实现目标:目标是输入一个数组,生成一个列表:通过拖拽排序,拖拽结束后输出一个经过排序的数组. 2.实现思路: 2.1是使用HTML5的drag功能来实现,每次拖拽时直接操作Dom节点排序,拖拽结束 ...

  8. Vue 表单拖拽排序

    Vue table表单拖拽 业务需求: 因为数据展示使用的是 elementUI 的 Table进行数据展示的,现在的需求是通过拖拽表单进行表单排序.同时,动态修改表单中的数据排列顺序.查阅了好多资料 ...

  9. vue实现拖拽排序

    基于vue实现列表拖拽排序的效果 在日常开发中,特别是管理端,经常会遇到要实现拖拽排序的效果:这里提供一种简单的实现方案. 此例子基于vuecli3 首先,我们先了解一下js原生拖动事件: 在拖动目标 ...

随机推荐

  1. android调用其他apk的activity

    <img src="https://img-blog.csdn.net/20160322114625025" alt="" />启动另一个apk的工 ...

  2. JS实现 类的 1.判断 2.添加 3.删除 4切换

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. Eclipse - lombok的@Slf4j和@Data无效

    问题与分析 最近开始学习spring-boot框架,我用的是Eclipse,然后发现在使用到了lombok的@Data注解时,Eclipse会编译错误.@Data的作用是自动生成toString方法和 ...

  4. 8. 字符串转换整数 (atoi)

    8. 字符串转换整数 (atoi) 方法一 import re import math class Solution(object): def myAtoi(self, str): "&qu ...

  5. __contains__, __len__,__reversed__

    __contains__():当使用in,not in 对象的时候 调用(not in 是在in完成后再取反,实际上还是in操作) class A(object): def __init__(self ...

  6. laravel使用swoole

    参考 参考2 另外主要用到artisan 首先创建SwooleCommand.php <?php namespace App\Console\Commands; use App\Http\Con ...

  7. Day2课后作业:购物车简单版

    PRODUCT_LIST = [ ['iphone7',6500], ['macbook',12000], ['pythonbook',66], ['bike',999], ['coffee',31] ...

  8. eclipse各种操作指南

    一.设置代码自动补全 1.设置java代码自动补全 Auto activation delay(ms):0 Auto activation trigger for java : .abcdefghij ...

  9. 简单了解junit的使用

    普通使用: 在没有用测试框架之前,我们要用一个main方法来跑代码,而有了像junit这样的测试框架后,就可以不用次次写个main方法了. 直接上代码,注释里有说明: package com.stuP ...

  10. JavaScript Allongé 第一呷 :基础函数 (2)

    啊!我想要有一个参数 到现在为止,我们已经了解了没有参数的函数.只说我们的函数没有任何参数,甚至还没说参数是什么.大多数程序员非常熟悉参数,中学数学就讨论这个了.所以你知道他们是什么,而我也知道你知道 ...