jquery Sortable实例二

最新推荐文章于 2022-10-16 23:42:55 发布

xpsharp

最新推荐文章于 2022-10-16 23:42:55 发布

阅读量138

点赞数

文章标签： ui java javascript ViewUI

由于公司需要，今天又写了一个关于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>

处理页面：

xpsharp

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery Sortable实例二

由于公司需要，今天又写了一个关于Sortable的实例，由于实例一的缺陷在于拖拽后，可能导致顺序重复的问题。这次是拖拽后触发，把所有的元素ID组成一个数组，在后台进行统一的排序，这就不会导致排序ID的重复。但性能会大大降低。因为如果有30个元素进行排序的话，就会导致进行30条SQL语句的更新。&lt;%@ page language="java" contentType="text/h...
复制链接

扫一扫