由于公司需要，今天又写了一个关于Sortable的实例，由于实例一的缺陷在于拖拽后，可能导致顺序重复的问题。这次是拖拽后触发，把所有的元素ID组成一个数组，在后台进行统一的排序，这就不会导致排序ID的重复。但性能会大大降低。因为如果有30个元素进行排序的话，就会导致进行30条SQL语句的更新。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@page import="data.ConstDataHolder"%>
<%@ page import="admin.dao.IbatisGameDao"%>
<%@ page import="admin.dao.IbatisHotpicDao"%>
<%@ page import="admin.dao.IbatisGamepackageDao"%>
<%@ page import="admin.dao.IbatisGameimageDao"%>
<%@ page import="admin.dao.IbatisChannelDao"%>
<%@ page import="db.dao.*"%>
<%@ page import="db.pojo.*"%>
<%@ page import="util.*"%>
<%@ page import="java.util.*" %>
<%@page import="java.text.SimpleDateFormat"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>编辑游戏 - 基本数据 - 玩沙网管理系统</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="../css/normal.css" />
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/fileTypeJudge.js"></script>
<script type="text/javascript" src="../js/jquery.ui.core.js"></script>
<script type="text/javascript" src="../js/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../js/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="../js/jquery.ui.sortable.js"></script>
<script type='text/javascript' src='../dwr/engine.js'></script>
<script type='text/javascript' src='../dwr/util.js'></script>
<script type='text/javascript' src='../dwr/interface/ValidateData.js'></script>
<script type='text/javascript' src='../js/validate.js'></script>
<script type="text/javascript">
$(function(){
$("#sortable").sortable({
update:function(event,ui){
$this = $(ui.item);
var flag = $this.find(":input[name=flag]").val();
var array_id
var array_id = new Array();
var a = 0;
$this.parents("ul").children("li").each(function(){
array_id[a++] = $(this).find(":input[name=gameId]").val();
})
$.post(
"selecthotpic2.jsp?target=edit",
{"flag":flag,"array_id":array_id.join(",")},
function(result){
}
)
}
});
$( "#sortable" ).disableSelection();
$(":file[name=filename]").bind("change",function(){
$(this).fileTypeJudge("photo");
})
$("#submitImg").bind("click",function(){
validateHotPic();
})
$(".isStatus").bind("click",function(){
var $this = $(this);
var status = $this.attr("checked") == true ? 1 : 0;
var flag = $this.parents("div").next("div").find(":input[name=flag]").val();
var gameId = $this.parents("div").next("div").find(":input[name=gameId]").val();
var data;
if(flag ==1){
data = "gameId=" + gameId + "&indexstatus=" + status + "&flag=" +flag;
}else{
data = "gameId=" + gameId + "&hotstatus=" + status + "&flag=" +flag;
}
$.post(
"selecthotpic2.jsp?target=status",data,function(redata){
}
)
})
})
</script>
</head>
<body>
<% request.setAttribute("menuId","3"); %>
<%@ include file="auth.jsp"%>
<div id="bodybox">
<%@ include file="inc/header.jsp"%>
<%@ include file="inc/mainnav.jsp"%>
<%@ include file="inc/subvernav.jsp"%>
<div id="rightbox">
<%
String navigaterPage = "selecthotpic.jsp";
GameDao gameDao = new IbatisGameDao();
Game game2 = new Game();
int bigclass = ParameterUtil.getIntParameter(request,"bigclass",0);
int flag = ParameterUtil.getIntParameter(request,"flag",0);
List<Game> gameList = null;
int size = 0;
if(flag != 0){
game2.setFlag(flag);
game2.addOrderBy("indexsort",2);
game2.addWhere(" and indexurl IS NOT NULL ");
gameList = gameDao.selectGameByE(game2);
size =( gameList == null ? 0 : gameList.size()); //获取图片个数
}else if(bigclass != 0){
game2.setBigclass(bigclass);//条件查询
game2.addOrderBy("hotsort",2);
game2.addWhere(" and hoturl IS NOT NULL ");
gameList = gameDao.selectGameByE(game2);
size =( gameList == null ? 0 : gameList.size()); //获取图片个数
}
%>
<div align="left">
分类热点：
<a href="selecthotpic.jsp?flag=1">首页</a>
<a href="selecthotpic.jsp?bigclass=1">游戏</a>
<a href="selecthotpic.jsp?bigclass=2">软件</a>
</div>
<ul id="sortable" style="width:660px;height:auto; list-style-type: none; margin: 0; padding: 0;">
<%
if(size != 0){
for(Game game : gameList) {
String gameName = game.getName();
int gameId = game.getId();
int sort =0;
String url = null;
if(flag == 1){//首页图片
url = game.getIndexurl();
} else {//非首页图片
url = game.getHoturl();
}
int hotsort = game.getHotsort();
int indexsort = game.getIndexsort();
int status = 0;
if(flag == 1){
status=game.getIndexstatus();
}else{
status=game.getHotstatus();
}
%>
<li style="width:200px;height:auto;float:left;margin:5px">
<form id="imageindex" action="selecthotpic2.jsp" id="selectform" method="post">
<div style="background:#E6E6E6;width:200px;height:30px;"><input type="checkbox" name="isStatus" class="isStatus" <%=status ==1 ? "checked" : "" %>/><span style="color:#FF0000;font-size:12px;">推荐</span><span>:<%=gameName%></span></div>
<div style="width:200px;height:auto;">
<span><img width=200 height=100 src='<%=url%>' /></span>
<p align="left">
<input name="hotsort" type="hidden" size="3" maxlength="3" value="<%= hotsort%>" style="width:80px">
<input type="hidden" name="target" value="edit">
<input type="hidden" name="flag" value="<%=flag %>">
<input type="hidden" name="hotsort" value="<%=hotsort %>">
<input type="hidden" name="indexsort" value="<%=indexsort %>">
<input type="hidden" name="gameId" value="<%=gameId %>">
</p>
</div>
</form>
</li>
<%
}
}else{
%>
<span> 没有对应的热点图片！ </span>
<%
}
%>
</ul>
</div>
</div>
</body>
</html>
处理页面：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@page import="data.ConstDataHolder"%>
<%@ page import="admin.dao.IbatisGameDao"%>
<%@ page import="admin.dao.IbatisGamepackageDao"%>
<%@ page import="admin.dao.IbatisGameimageDao"%>
<%@ page import="db.dao.*"%>
<%@ page import="db.pojo.*"%>
<%@ page import="util.*"%>
<%@ page import="java.util.*" %>
<%@page import="java.text.SimpleDateFormat"%>
<%
String target = ParameterUtil.getStringParameter(request, "target",null);
int gameId = ParameterUtil.getIntParameter(request,"gameId",0);
String gameId_arr = ParameterUtil.getStringParameter(request, "array_id", "");
String[] id_arr = gameId_arr.split(",");
GameDao gameDao = new IbatisGameDao();
int flag = ParameterUtil.getIntParameter(request,"flag",0);
int indexstatus = ParameterUtil.getIntParameter(request,"indexstatus",0);
int hotstatus = ParameterUtil.getIntParameter(request,"hotstatus",0);
if("edit".equals(target)) {//更新热点次序
int a = 1;
Game game = new Game();
for(int i = id_arr.length-1; i>=0; i--){
game.setId(Integer.parseInt(id_arr[i]));
if(flag ==1){
game.setIndexsort(a++);
}else{
game.setHotsort(a++);
}
gameDao.updateGameSByE(game);
}
}else if("status".equals(target)){
Game game = new Game();
game.setId(gameId);
if(flag ==1){
game.addUpdate(",indexstatus =" + indexstatus );
}else{
game.addUpdate(",hotstatus =" + hotstatus);
}
gameDao.updateGameSByE(game);
}
response.sendRedirect("selecthotpic.jsp");
return;
%>
本文介绍了一个使用Sortable插件实现拖拽排序更新的实例，通过将元素ID组成的数组发送到后台进行排序更新，解决了排序ID重复的问题，但也可能带来性能上的挑战。
扫一扫
3809
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
