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. HDU3038【种类并查集】

    题意: 给出m组区间[a,b],以及其区间的和,问有矛盾的有几组: 思路: 种类并查集. 主要是几个关系:同类元素的关系,父亲与儿子的关系,不同类元素的关系: 我们可以类似看作一个前缀和,sum[x] ...

  2. Codeforces 744C【DFS】

    题意: 给你一幅图,然后有几个特殊点 和不特殊点,给你一些已经连了的边,在保证特殊点不能连的前提下,问最多还能添几条边,双向边 思路: 简单题,就是一个特殊点就是一个集合,然后搜一下,最后把还有没连的 ...

  3. 5-5 城市间紧急救援 (25分)【最短路spfa】

    5-5 城市间紧急救援   (25分) 作为一个城市的应急救援队伍的负责人,你有一张特殊的全国地图.在地图上显示有多个分散的城市和一些连接城市的快速道路.每个城市的救援队数量和每一条连接两个城市的快速 ...

  4. [Xcode 实际操作]九、实用进阶-(29)为App添加IAP(支付方式)内购项目

    目录:[Swift]Xcode实际操作 首先请阅读:[Xcode10 实际操作]九.实用进阶-(28)在iTunes Connect(苹果商店的管理后台)中创建一个新的新的APP 本文将演示如何给刚刚 ...

  5. java多线程中用到的方法详细解析

    在多线程学习的过程中涉及的方法和接口特别多,本文就详细讲解下经常使用方法的作用和使用场景. 1.sleep()方法.      当线程对象调用sleep(time)方法后,当前线程会等待指定的时间(t ...

  6. 始终要覆盖toString

    始终要覆盖toString   虽然java.lang.Object提供了toString方法的一个实现,但它返回的字符串通常并不是类的用户所期望看到的.它包含类的名称,以及一个"@&quo ...

  7. eclipse svn 相关

    eclipse本身带有cvs插件,我们也可以在eclipse里面加上svn插件,请参考eclipse安装svn插件,以及使用,但是在eclipse的左边栏,.svn,.cvs的文件会显示出来,目录拉的 ...

  8. TYVJ1424占卜DIY

    Description lyd学会了使用扑克DIY占卜.方法如下:一副去掉大小王的扑克共52张,打乱后均分为13堆,编号1~13,每堆4张,其中第13堆称作“生命牌”,也就是说你有4条命.这里边,4张 ...

  9. Servlet | 访问不同格式文件(PDF、doc)

    核心代码 //设置响应内容类型为PDF类型 response.setContentType("application/pdf"); request.getRequestDispat ...

  10. css-bootstrap

    CSS概览 基本的bootstrap包含三个文件,引入到html页面中 <link href="{% static 'css/bootstrap.min.css' %}" r ...