ztree这个系列的最后一篇,也是ztree功能强大的体现之中的一个——排序功能。

ztree能够实现全部节点之间任意的拖拽排序功能。我这里依据须要实现了仅仅同意同级之间任意拖拽排序,事实上原理都一样,仅仅是范围缩小了一些,多了一些推断而已。以下是每一层的代码。还是採取仅仅贴出功能代码。由于这个拖拽排序功能我感觉非常不错,所以单独拿出一篇博客来展示,也方便理解。

Jsp页面实现功能的js代码例如以下:

     //拖拽前运行
     var dragId;
     function beforeDrag(treeId, treeNodes) {
            for (var i=0,l=treeNodes.length; i<l; i++) {
                   dragId = treeNodes[i].pId;
                 if (treeNodes[i].drag === false) {
                      return false;
                }
           }
            return true;
     }
      //拖拽释放之后运行
     function beforeDrop(treeId, treeNodes, targetNode, moveType) {
             if(targetNode.pId == dragId){
                  var data = {id:treeNodes[0].id,targetId:targetNode.id,moveType:moveType};
                  var confirmVal = false;
                  $.ajax({
                       async: false,
                       type: "post",
                       data:data,
                       url:"<%=request.getContextPath() %>/library/updateLibrarySort/ ",
                       success: function(json){
                             if(json=="success" ){
                                  confirmVal = true;
				  alert('操作成功!');
                             } else{
				  alert('亲,操作失败');
                             }
                       },
                       error: function(){
			     alert('亲,网络有点不给力呀。');
                       }
                  });
                 return confirmVal;
             } else{
		  alert('亲,仅仅能进行同级排序!

');
                  return false;
           }
     }

Controller层代码例如以下:

     /**
     * 更新分类排序
     * @return
     */
     @RequestMapping(value="updateLibrarySort/")
     @ResponseBody
     public String updateLibrarySort(HttpServletRequest request, HttpServletResponse response,LibraryVo libraryVo) {
          String createname=(String) request.getSession().getAttribute(Constants.CURRENT_USER_NAME);
          return libraryService.updateLibrarySort(libraryVo,createname);
     }

service层代码例如以下:

     /**
     * 更新排序
     * @return
     */
     public String updateLibrarySort(LibraryVo libraryVo,String userName){
          int numFlag = 0;
          Library libraryT = libraryMapper.selectByPrimaryKey(libraryVo.getTargetId());//目标分类信息
          Library library = libraryMapper.selectByPrimaryKey(libraryVo.getId());//拖动分类信息
          library.setTarget_order_id(libraryT.getOrder_id());
          library.setUpdate_time(new Date());//设置时间
          library.setUpdate_user(userName);//设置操作人
          libraryT.setUpdate_time(new Date());//设置时间
          libraryT.setUpdate_user(userName);//设置操作人
          Map<String,Object> libraryMap = new  HashMap<String, Object>();//參数集合
          if (libraryVo.getMoveType().equals("prev")) {//向前移动
               libraryMap.put("pid", library.getPid());
               libraryMap.put("order_id", library.getTarget_order_id());
               libraryMap.put("target_order_id", library.getOrder_id());
               List<Library> listLibraryFlag = libraryMapper.findLibraryListByOrderId(libraryMap);
               int order_id = libraryT.getOrder_id() + 1;
               library.setOrder_id(libraryT.getOrder_id());
               libraryT.setOrder_id(order_id);
               for (int i = 0; i < listLibraryFlag.size(); i++) {//更新全部受影响的排序字段
                    Library ly = listLibraryFlag.get(i);
                    if(!(ly.getId()).equals(library.getId()) && !(ly.getId()).equals(libraryT.getId())){
                         ly.setUpdate_time(new Date());
                         ly.setUpdate_user(userName);
                         ly.setOrder_id(ly.getOrder_id()+1);
                         libraryMapper.updateOrderId(ly);//更新其它受影响的分类信息
                    }
               }
               libraryMapper.updateOrderId(library);//更新拖动分类信息
               numFlag = libraryMapper.updateOrderId(libraryT);//更新目标分类信息
          }else if(libraryVo.getMoveType().equals("next")){//向后移动
               libraryMap.put("pid", library.getPid());
               libraryMap.put("order_id", library.getOrder_id());
               libraryMap.put("target_order_id", library.getTarget_order_id());
               List<Library> listLibraryFlag = libraryMapper.findLibraryListByOrderId(libraryMap);
               int order_id = libraryT.getOrder_id();
               library.setOrder_id(order_id);
               libraryT.setOrder_id(order_id - 1);
               for (int i = 0; i < listLibraryFlag.size(); i++) {//更新全部受影响的排序字段
                    Library ly = listLibraryFlag.get(i);
                    if(!(ly.getId()).equals(library.getId()) && !(ly.getId()).equals(libraryT.getId())){
                         ly.setUpdate_time(new Date());
                         ly.setUpdate_user(userName);
                         ly.setOrder_id(ly.getOrder_id() - 1);
                         libraryMapper.updateOrderId(ly);//更新其它受影响的分类信息
                    }
               }
               libraryMapper.updateOrderId(library);//更新拖动分类信息
               numFlag = libraryMapper.updateOrderId(libraryT);//更新目标分类信息
          }else{
               //
          }
          return ServiceUtil.ReturnString(numFlag);
     }

Mapper层代码例如以下

     /**
     * 依据pid、order_id和target_order_id查询全部受影响的信息
     * @param pid
     * @param order_id
     * @param target_order_id
     * @return
     */
     public List<Library> findLibraryListByOrderId(Map<String,Object> library);

     /**
     * 更新
     * @param library
     * @return
     */
     public int updateOrderId(Library library);

相应的xml代码例如以下:

  < sql id= "Base_Column_List" >
    id, pid , name, create_time, update_time, is_delete, update_user, create_user, level_id,
    order_id
  </ sql>
  <!-- 更新order_id -->
  < update id= "updateOrderId" parameterType="Library" >
           update onair_vms_library
            <set >
                update_time = #{update_time},
                update_user = #{update_user},
                order_id = #{order_id}
            </set >
           where id = #{id}
  </ update>

  <!-- 依据 pid、order_id和target_order_id查询全部受影响的信息 -->
  < select id= "findLibraryListByOrderId" resultMap= "BaseResultMap" parameterType ="java.util.Map" >
     select
     <include refid ="Base_Column_List"/>
     from onair_vms_library
     where  order_id between  #{order_id} and  #{target_order_id}  and  pid = #{ pid}
  </ select>

写的一般,不正确的地方欢迎指正,有高效或者更加简便的办法希望可以共享一下,尤其是在排序功能运行保存的时候假设可以不使用循环一条sql能搞定就更加强大了。欢迎大家指点。

ztree使用系列四(ztree实现同级拖拽排序并将排序结果保存数据库)的更多相关文章

  1. JS组件系列——Bootstrap Table 表格行拖拽(二:多行拖拽)

    前言:前天刚写了篇JS组件系列——Bootstrap Table 表格行拖拽,今天接到新的需要,需要在之前表格行拖拽的基础上能够同时拖拽选中的多行.博主用了半天时间研究了下,效果是出来了,但是感觉不尽 ...

  2. MVC小系列(十五)【MVC+ZTree实现对树的CURD及拖拽操作】

    根据上一讲的可以加载一棵大树,这讲讲下如果操作这颗大树 <link href="../../Scripts/JQuery-zTree/css/zTreeStyle/zTreeStyle ...

  3. 爱上MVC3~MVC+ZTree实现对树的CURD及拖拽操作

    回到目录 上一讲中,我们学习了如何使用zTree对一棵大树(大数据量的树型结构的数据表,呵呵,名称有点绕,但说的是事实)进行异步加载,今天这讲,我们来说说,如何去操作这棵大树,无非就是添加子节点,删除 ...

  4. JS组件系列——Bootstrap Table 表格行拖拽

    前言:之前一直在研究DDD相关知识,好久没更新JS系列文章了.这两天做了一个简单的业务需求,觉得效果还可以,今天在这里分享给大家,欢迎拍砖~~ 一.业务需求及实现效果 项目涉及到订单模块,那天突然接到 ...

  5. canvas 图片拖拽旋转之二——canvas状态保存(save和restore)

    引言 在上一篇日志“canvas 图片拖拽旋转之一”中,对坐标转换有了比较深入的了解,但是仅仅利用坐标转换实现的拖拽旋转,会改变canvas坐标系的状态,从而影响画布上其他元素的绘制.因此,这个时候需 ...

  6. 【UWP】拖拽列表项的排序功能实现

    在一些允许用户自定义栏目顺序的app(如:凤凰新闻.网易云音乐等),我们可以方便地拖拽列表项来完成列表的重新排序,进而完成对栏目顺序的重排.这个功能很人性化,而实现起来其实很简单(甚至都不用写什么后台 ...

  7. 【转】JS容器拖拽效果,并通过cookie保存拖拽各容器的所在位置

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. dev GridControl实现拖拽

    一.示例说明 以gridControl1和gridControl2为例,从gridControl1拖拽行到gridControl2中去. 二.属性设置 gridControl2.AllowDrop = ...

  9. 使用 Jquery-UI 实现一次拖拽多个选中的元素操作

    项目需要,实现一个拖放操作,要求每次可以拖拽选中的多个元素,释放到目标容器后可排序.考虑了一下,觉得jquery-ui比较合适,毕竟它提供了项目需要的交互性事件机制.拖拽.释放.排序.选择等效果.而在 ...

随机推荐

  1. Java-类与类之间的关系

    类与类之间的几种关系   一.继承关系      继承指的是一个类(称为子类.子接口)继承另外的一个类(称为父类.父接口)的功能,并可以增加它自己的新功能的能力.在Java中继承关系通过关键字exte ...

  2. POJ3783Balls[DP 最坏情况最优解]

    Balls Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 907   Accepted: 598 Description T ...

  3. 基于SignalR的小型IM系统

    这个IM系统真是太轻量级了,提供的功能如下: 1.聊天内容美化 2.用户上下线提示 3.心跳包检测机制 4.加入用户可群聊 下面来一步一步的讲解具体的制作方法. 开篇准备工作 首先,巧妇难为无米之炊, ...

  4. CentOS7下安装JDK

    1.下载JDK,下载地址:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html. 测试 ...

  5. linux 常用的酷炫命令

    1 命令行日常系快捷键 如下的快捷方式非常有用,能够极大的提升你的工作效率: CTRL + U -剪切光标前的内容 CTRL + K -剪切光标至行末的内容 CTRL + Y -粘贴 CTRL + E ...

  6. scala.collection.immutable.HashSet$.empty()Lscala/collection/immutable/HashSet

    最近重新搭了spark环境.在Master上使用了IDEA来写代码.确实很方便.我用的是hadoop2.6.spark1.5.1forhadoop2.6. scala之前用的是2.11.0老是报这个错 ...

  7. iterator 及 迭代器模式(转发)

    Iterator definitions An iterator is any object that, pointing to some element in a range of elements ...

  8. Ubuntu下配置L2TP

    发现PPTP已经不可用了,不知是不是又被墙了.只能尝试L2TP了. Ubuntu可视化配置界面network-manager默认是没有L2TP配置选项的,需要安装第三方插件软件: sudo apt-a ...

  9. 强制IE使用最高版本引擎渲染页面,避免默认使用IE7引擎导致的页面布局混乱及其它问题

    背景 基于Asp.net MVC的一个Intranet web application, 现象 Application发布到服务器端后,在客户端IE访问页面布局混乱,并有javascript报错 原因 ...

  10. MSMQ消息队列安装

    一.Windows 7安装.管理消息队列1.安装消息队列   执行用户必须要有本地 Administrators 组中的成员身份,或等效身份.   具体步骤:    开始—>控制面板—>程 ...