easyui树的拖拽排序功能

easyui树中有拖拽功能

树结构如下:

一个行政区域对应一个单位,一个单位对应多个部门,每个部门下有相关人员,功能要求:

(1)行政区域没有子节点,点击text加载部门;(2)点击部门的text,如果有下级部门则加载部门,没有则加载人员;(3)树都有拖拽排序功能

1、前台页面:

  1. <script type="text/javascript" src = "js/lib/jquery-1.8.0.min.js"></script>
  2. <script type="text/javascript" src = "js/lib/jquery.easyui.min.js"></script>
  1. <div data-options="region:'center'">
  2. <ul id="orgs_tree" class="easyui-tree" ></ul>
  3. </div>
  1. var orgs_tree_default = {
  2. url : 'servlet/SearchServlet?dispatch=0',
  3. animate : true,
  4. onClick:function(node){
  5. var url = "servlet/SearchServlet?dispatch=1";//默认加载地区的树
  6. var isDeptTree = false;
  7. var unit_id ;
  8. //根据行政区划获取单位列表
  9. $.getJSON(url,{regions_id:node.attributes.regions_id},function(data){
  10. if(data.length > ){
  11.  
  12. }else if(data.length == ){
  13.  
  14. }else{
  15. //点击部门树的text,加载树
  16. $("#dept_tree").tree({
  17. url:"servlet/SearchServlet?dispatch=2&unit_id=" + unit_id+"&id=0", //默认加载部门的树
  18. onBeforeExpand:function(node,param){
  19. $("#dept_tree").tree("options").url="servlet/SearchServlet?dispatch=2&unit_id=" + unit_id+"&id="+node.id;
  20. },
  21. onSelect:function(node){ //当点击text的时候,展开子节点
  22. $(this).tree("expand",node.target);
  23. }
  24. });
  25. }
  26. });
  27. },
  28. onDrop:function(target, source, point){ //行政区域树的拖拽功能
  29. var node = $("#orgs_tree").tree("getNode",target); // 将DOM对象转换为node
  30. //组装参数
  31. var param = {
  32. //目标节点属性
  33. targetId : node.attributes.regions_id ,
  34. targetSort : node.attributes.regions_sort ,
  35.  
  36. //源节点属性
  37. sourceId : source.attributes.regions_id ,
  38. sourceSort : source.attributes.regions_sort,
  39.  
  40. //操作方式3种,append:变更父节点,top:平级-上 bottom:平级-下
  41. point : point};
  42.  
  43. //更新数据库,这个后台需要用到存储过程
  44. var url = "servlet/ManagerServlet?dispatch=0";
  45. $.post(url,param,function(data){
  46. alert("success");
  47. });
  48. }
  49. };

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. MarketServer 日志

    2014.04.29 1. 发现有时候会跳出 Exception Infomations:   用户异常信息:Socket未连接 跟踪后发现的一次情况是: 服务器根据客户端请求从后台读取数据后,写数据 ...

  2. performSegueWithIdentifier 不生效的解决办法

    相信很多人都会遇到这样的需求: APP 打开以后,判断用户是否登录,如果未登录,就跳转到登陆页. 今天我也遇到了这个需求,发现我封装的一个 `func checkLoginStatus()` 放在 ` ...

  3. wordcloud 的常规方法

    wordcloud 库把词云当作一个WordCloud对象 ——wordcloud.WordCloud() 代表一个文本对应的词云 ——可以根据文本中词语出现的频率等参数绘制词云 ——绘制词云的形状. ...

  4. 如何使用Tomcat自带的日志实现tomcat-juli.jar

    前言 Tomcat自带的日志实现是tomcat-juli.jar,它是对默认的JDK日志java.util.logging进行一定的封装,和标准JDK日志支持相同的配置,但是和log4j等常用的日志框 ...

  5. MyBatis逆向工程中domainObjectRenamingRule报错或无效

    使用domainObjectRenamingRule报错 在使用MyBatis逆向工程时报错如下: org.mybatis.generator.exception.XMLParserException ...

  6. window git bash客户端vimrc设置tab缩进

    从开发机写的代码,弄到windows上的客户端git提交,总是显示格式对不起的问题,问题是再vimrc上tab键的缩进不等于4个空格,然后就需要设置成和linux一样的四格缩进. 安装上git bas ...

  7. 牛客寒假5-J.炫酷数学

    链接:https://ac.nowcoder.com/acm/contest/331/J 题意: 小希最近想知道一个东西,就是A+B=A|B(其中|为按位或)的二元组有多少个. 当然,直接做这个式子对 ...

  8. GYM 101673E(暴搜预处理)

    1.不会超过500个不同的串-- 2.样例没给has到has是怎么样的,实测是true. 3.记忆化别剪错枝就好,嘤嘤嘤-- const int maxn = 505 + 5; int n, m, t ...

  9. Python相对导入导致SystemError的解决方案(译)

    原文出处: http://stackoverflow.com/   译文出处:yibohu1899 这个问题是如何解决在相对导入的时候,如果出现’System Error’的时候的解决方案.顺带一提, ...

  10. 持续集成~Jenkins里的NuGet和MSBuild插件

    Jenkins是一个持续集成的环境,它是java开发的,大叔认为它的工作流程是 从源代码拉一个项目下来到它本地(可以配置定时机制) 恢复相关程序包nuget 编译程序 发布程序 现在说一下在配置jen ...