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. Lua 基础

    Lua 5.3 的中文手册, http://cloudwu.github.io/lua53doc 在线浏览 --第一部分 -- 两个横线开始单行的注释 --[[ 加上两个[和]表示 多行的注释. -- ...

  2. mysql 范式和反范式

    第一范式(1NF)强调的是列的原子性,即列不能够再分成其他几列. 第二范式(2NF) 首先是 2NF,另外包含两部分内容一是表必须有一个主键:二是没有包含在主键中的列必须完全依赖于主键,而不能只依赖于 ...

  3. 虚拟现实外包公司— VR开发编辑器意义重大 印证VR不仅服务于用户

    三大引擎制造商 Unity Technologies .Epic Games 和Crytek 讨论在自家产品中添加附件,方便开发商在虚拟现实中创作游戏.这会对许多人造成影响,特别是早已进入虚拟现实的先 ...

  4. 从出租车司机到大BOSS的转型之路

    来深圳之前,曾有人这样告诉我:在深圳千万不能以貌取人,打扮不起眼,也许他转身开的座驾就是宝马.奔驰;不管一个人多么邋遢俗气,也别瞧不起人家,也许他的手提袋里就是成捆的人民币现金;不管一个人打扮的多么土 ...

  5. memcache c++使用

    memcache作为一个内存数据库,快速查询的功能. 在c++下面使用memcache需要一个memcache client.c++版本的是libmemcached http://libmemcach ...

  6. java使用httpcomponents post发送json数据

    一.适用场景 当我们向第三方系统提交数据的时候,需要调用第三方系统提供的接口.不同的系统提供的接口也不一样,有的是SOAP Webservice.RESTful Webservice 或其他的.当使用 ...

  7. Winform自定义分页控件的实现

    实现效果 有点丑陋 但是功能是没问题的 测试过 实现思路 先创建一个用户控件 代码实现 public partial class PagerControl : UserControl { ; /// ...

  8. Word和Windows有严重的bug这样下去微软堪忧

    Word和Windows对微软的重要性就像C语言的指针. Windows中特别常用的搜索功能有严重的bug,常常搜不到Excel文件. Word中的排版功能有严重的bug,有图超过几十页就无法排版了, ...

  9. HDU 1041 Computer Transformation (简单大数)

    Computer Transformation http://acm.hdu.edu.cn/showproblem.php?pid=1041 Problem Description A sequenc ...

  10. windows下python脚本程序的运行

    c:\python33\python.exe c:\python33\trycoding.py