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实现同级拖拽排序并将排序结果保存数据库),布布扣,bubuko.com
ztree使用系列四(ztree实现同级拖拽排序并将排序结果保存数据库)
原文地址:http://blog.csdn.net/huangaigang6688/article/details/27381289