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;
}

扫描二维码关注公众号，回复： 5435273 查看本文章
}
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>

< 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>

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

--------------------- 本文来自黄爱岗的CSDN 博客，全文地址请点击：https://blog.csdn.net/huangaigang6688/article/details/27381289?utm_source=copy

ztree实现同级拖拽排序并将排序结果保存数据库

猜你喜欢