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


           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能搞定就更加强大了。欢迎大家指点。

  • 相关阅读:
    vue 页面设置title
    git clone 下载慢 解决方法 码云
    nestjs pm2 启动 静态文件404报错
    Linux释放内存空间
    DBMS_STATS.GATHER_SCHEME_STATS学习
    TPCH测试工具
    Oracle中shrink space命令
    java 测试框架 TestNG
    数据库与linux中quota的作用
    java 测试框架
  • 原文地址:https://www.cnblogs.com/lcchuguo/p/5358630.html
Copyright © 2020-2023  润新知