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能搞定就更加強大了。歡迎大家指點。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM