当前位置： 代码迷 >> Web前端 >> jquery Sortable范例
  详细解决方案

jquery Sortable范例

热度：498   发布时间：2012-06-29 15:48:46.0
jquery Sortable实例

转自：?http://blog.csdn.net/xpsharp/article/details/6910424

? ? ? ?jquery Sortable实例


?

?

?

[html] view plaincopy
  1. <%@?page?language="java"?contentType="text/html;?charset=UTF-8"??
  2. ????pageEncoding="UTF-8"%>??
  3. <%@?page?import="com.wap3.navigater.service.*"?%>??
  4. <%@?page?import="com.wap3.navigater.dao.*"?%>??
  5. <%@?page?import="com.wap3.navigater.pojo.*"?%>??
  6. <%@?page?import="com.wap3.navigater.util.*"?%>??
  7. <%@?page?import="java.util.*"?%>??
  8. <%@?page?import="java.text.*"?%>??
  9. <!DOCTYPE?html?PUBLIC?"-//W3C//DTD?HTML?4.01?Transitional//EN"?"http://www.w3.org/TR/html4/loose.dtd">??
  10. <html>??
  11. <head>??
  12. <meta?http-equiv="Content-Type"?content="text/html;?charset=UTF-8">??
  13. <script?type="text/javascript"?src="../js/jquery.js"></script>??
  14. <script?type="text/javascript"?src="../js/ajax_edit.js"></script>??
  15. <script?type="text/javascript"?src="../js/jquery.jclock.js"></script>??
  16. <script?type="text/javascript"?src="../js/common.js"></script>??
  17. <script?type="text/javascript"?src="../js/jquery.form.js"></script>??
  18. <script?type="text/javascript"?src="../js/fileTypeJudge.js"></script>??
  19. <script?type="text/javascript"?src="../js/jquery.datepick.js"></script>??
  20. <script?type="text/javascript"?src="../js/jquery.datepick-zh-CN.js"></script>??
  21. <!--?拖拽需要导入的包?-->??
  22. <script?type="text/javascript"?src="../js/jquery.ui.core.js"></script>??
  23. <script?type="text/javascript"?src="../js/jquery.ui.widget.js"></script>??
  24. <script?type="text/javascript"?src="../js/jquery.ui.mouse.js"></script>??
  25. <script?type="text/javascript"?src="../js/jquery.ui.sortable.js"></script>??
  26. <!--?拖拽需要导入的包?-->??
  27. ??
  28. <link?media=all?href="../css/common.css"?type=text/css?rel=stylesheet>??
  29. <title>Insert?title?here</title>??
  30. <style?type="text/css">??
  31. ????@import?"inc/jquery.datepick.css";??
  32. </style>??
  33. <script?type="text/javascript">??
  34. var?$imgthis;??
  35. ????$(function(){??
  36. ????????var?oldValue;??
  37. ????????$(".package_list?.edit").bind("dblclick",function(){??
  38. ????????????if($(this).has("input").length>0)return?false;??
  39. ????????????oldValue?=?$(this).text();??
  40. ????????????$(this).ajax_edit("editaddress.jsp",oldValue);??
  41. ????????});??
  42. ??
  43. ????????$(".package_list?.edit_img").bind("dblclick",function(){????//??
  44. ????????????oldValue?=?$(this).find('img').attr("src")?;??
  45. ????????????$imgthis?=?$(this);??
  46. ????????????$(this).parents("tr.package_list").siblings(".package_list").find(":input.cancel").trigger("click");??
  47. ????????????$(this).ajax_edit_img("editaddress.jsp",oldValue);??
  48. ????????});??
  49. ??????????
  50. ????????$(".package_list?.edit?:input[type!=file]:visible").live("blur",function(){??
  51. ????????????$(this).ajax_handle("editaddress.jsp?action=edit",oldValue);??
  52. ????????});??
  53. ??
  54. ????????$(".afile").live("change",function(){??
  55. ????????????$(this).fileTypeJudge("photo");??
  56. ????????})??
  57. ??????????
  58. ????????$("#editcategoryName").live("change",function(){??
  59. ????????????$(this).ajax_handle("editaddress.jsp?action=edit",oldValue);??
  60. ????????});??
  61. ??
  62. ??????????
  63. ????????$("#del").click(?function?()?{??
  64. ????????????if($(":checkbox.urlid:checked").size()>0){??
  65. ????????????????var?result?=?confirm("不可恢复的操作:确定要吗？"+?'\n'?+"提示：如果删除大类会删除大类及下面的子类！！！");??
  66. ????????????????if?(result)?{??
  67. ????????????????????var?url?=?location.href;??
  68. ????????????????????return?;??
  69. ????????????????????$(".main_table").wrap("<form?id='selectAddressForm'?action='selectaddress.jsp?action=del'?method='post'></form>");??
  70. ????????????????????$("#selectAddressForm").submit();??
  71. ????????????????}??
  72. ????????????}else{??
  73. ????????????????alert("请选择要删除的项目！");??
  74. ????????????????return?false;??
  75. ????????????}??
  76. ????????});??
  77. ??
  78. ????????$("#sortable").sortable({??
  79. ????????????//cursorAt:?'top?bottom',???//只能上下移动，还有left,rigth参数???
  80. ????????????cancel:?"tr[class!=package_list],tr.package_list?td:not(.edit_img)",?????//取消两个DOM?中间用逗号隔开???
  81. ????????????update:function(event,ui){??
  82. ????????????????$this?=?$(ui.item);??
  83. ????????????????var?thisid?=?$this.find(".urlid").val();??
  84. ????????????????var?nextfilter?=?Number($this.next("tr.package_list").children("td.filter").text())+1;??
  85. ????????????????var?$loading?=?$("loading……");??
  86. ????????????????$.ajax(?{??
  87. ?????????????????????type?:?"POST",??
  88. ?????????????????????url?:?"editaddress.jsp?action=edit&target=filter",??
  89. ?????????????????????data?:?"filter="+nextfilter+"&urlid="+thisid,??
  90. ?????????????????????timeout?:?50000,??
  91. ?????????????????????cache?:?false,??
  92. ?????????????????????beforeSend?:?function(XMLHttpRequest)?{??
  93. ?????????????????????},??
  94. ?????????????????????success?:?function(data,?textStatus)?{??
  95. ?????????????????????????data?=?data.replace(/^\s*|\s*$/,?'');??
  96. ?????????????????????????$this.children(".filter").text(data);??
  97. ?????????????????????},??
  98. ?????????????????????complete?:?function(XMLHttpRequest,?textStatus)?{??
  99. ?????????????????????},??
  100. ?????????????????????error?:?function()?{??
  101. ?????????????????????????$("#sortable").sortable('cancel');??
  102. ?????????????????????}??
  103. ????????????????????});??
  104. ????????????????//alert($("#sortable?tr").index($(ui.item)));??
  105. ????????????}??
  106. ????????});??
  107. ????????$(?"#sortable"?).disableSelection();??
  108. ????});??
  109. ????function?callback(msg)??
  110. ????{??????
  111. ????????$imgthis.html("<img?class='logo'?src='"+msg+"'?title='"+msg+"'?/>");??
  112. ????}???
  113. </script>??
  114. </head>??
  115. <body>??
  116. ??
  117. ????<%?????
  118. ????????String?action?=?ParameterUtil.getStringParameter(request,"action","");??
  119. ????????FriendurlDao?friendurlDao?=?new?IbatisFriendurlDao();??
  120. ????????if("del".equals(action)){??
  121. ????????????int[]?urlids?=?ParameterUtil.getIntArrayParams(request,"urlid");??
  122. ????????????for(int?urlid?:?urlids){??
  123. ????????????????friendurlDao.deleteFriendurlByP(urlid);??
  124. ????????????}??
  125. ????????}??
  126. ????????String?navigaterPage?=?request.getRequestURL().toString();??
  127. ????????if(request.getQueryString()!=?null){??
  128. ????????????navigaterPage?+=?"?"+request.getQueryString();??
  129. ????????}??
  130. ????????int?pageSize?=?ParameterUtil.getIntParameter(request,"pageSize",10);??
  131. ????????int?pageNo?=?ParameterUtil.getIntParameter(request,"pageNo",1);??
  132. ????????String?orderBy?=?ParameterUtil.getStringParameter(request,"orderBy","filter");??
  133. ????????int?ascOrDesc?=?ParameterUtil.getIntParameter(request,"ascOrDesc",2);??
  134. ??????????
  135. ????????Friendurl?friendurl?=?new?Friendurl();??
  136. ????????friendurl.addOrderBy(orderBy,ascOrDesc);??
  137. ????????List<Friendurl>?friendurlList?=?friendurlDao.selectFriendurlByE(friendurl);??
  138. ??????????
  139. ????????????//分页??
  140. ????????int?totallpage?=?(int)?Math.ceil(((double)?friendurlList?.size()?*?1.0D)/?(double)?pageSize);??
  141. ????????pageNo?=pageNo?<=?0???1?:?pageNo;??
  142. ????????pageNo?=pageNo?>?totallpage???totallpage?:?pageNo;??
  143. ????????DataPageUtil?datePage?=?new?DataPageUtil(friendurlList?,friendurlList?.size(),pageSize,?pageNo);??
  144. ????????boolean?hasPrerPage?=?datePage.hasPrevPage();??
  145. ????????boolean?hasNextPage=??datePage.hasNextPage();??
  146. ????????int?curpageNo?=??datePage.getPageNo();??
  147. ????????int?pageCount?=?datePage.getPageCount();??
  148. ????????friendurlList?=?DataPageUtil.subList(friendurlList,?pageSize,?pageNo);??
  149. ??????????
  150. ??????????
  151. ????????if(friendurlList?==?null?&&?friendurlList.size()<=0)?{??
  152. ????????????out.println("没有您需要的数据");??
  153. ????????}else{??
  154. ?????%>??
  155. ?????<%@include?file="inc/header.jsp"??%>??
  156. ????<div?id?=?"mainbox">??
  157. ????????<div?class?=?"c1">??
  158. ????????????<table?class="main_table"?width="100%"?border="1"?cellspacing="0"?cellpadding="0">??
  159. ?????????????<tbody?id="sortable">??
  160. ????????????????<tr>??
  161. ????????????????????<th?align="center"?height="20"?colspan="13"?align="center"?bgcolor="#006699">条目列表</th>??
  162. ????????????????</tr>??
  163. ????????????????<tr>??
  164. ????????????????????<td?width="10%"?height="20"?align="center"?bgcolor="#009999">??
  165. ????????????????????????<input?id="AllORNoall"?type="checkbox"><label?for="AllORNoall">全选</label>??
  166. ????????????????????????<input?type="button"?id="reserse"?value="反选"?/>??
  167. ????????????????????</td>??
  168. ??????????????????????
  169. ????????????????????<td?width="7%"?height="20"?align="center"?bgcolor="#009999">站点名称</td>??
  170. ????????????????????<td?width="7%"?height="20"?align="center"?bgcolor="#009999">站点别名</td>??
  171. ????????????????????<td?width="7%"?height="20"?align="center"?bgcolor="#009999">归类</td>??
  172. ????????????????????<td?width="7%"?height="20"?align="center"?bgcolor="#009999">公司地址</td>??
  173. ????????????????????<td?width="7%"?height="20"?align="center"?bgcolor="#009999">文字链接</td>??
  174. ????????????????????<td?width="7%"?height="20"?align="center"?bgcolor="#009999">图片链接</td>??
  175. ????????????????????<td?width="7%"?height="20"?align="center"?bgcolor="#009999">描述</td>??
  176. ????????????????????<td?width="7%"?height="20"?align="center"?bgcolor="#009999">有效开始时间</td>??
  177. ????????????????????<td?width="7%"?height="20"?align="center"?bgcolor="#009999">有效结束时间</td>??
  178. ????????????????????<td?width="7%"?height="20"?align="center"?bgcolor="#009999">电话</td>??
  179. ????????????????????<td?width="7%"?height="20"?align="center"?bgcolor="#009999">位置排序</td>??
  180. ????????????????????<td?width="7%"?height="20"?align="center"?bgcolor="#009999">推荐序号</td>??
  181. ??????????????????????
  182. ????????????????</tr>??
  183. ????????????????<%??
  184. ????????????????????for(Friendurl?friendurlTemp:friendurlList)?{??
  185. ????????????????????????int?urlId?=?friendurlTemp.getUrlid();??
  186. ????????????????????????String?siteName?=?friendurlTemp.getSitename();??
  187. ????????????????????????int?categoryId?=?friendurlTemp.getCategoryId();??
  188. ????????????????????????CategoryDao?categoryDao?=?new?IbatisCategoryDao();??
  189. ????????????????????????Category?category?=?categoryDao.selectCategoryByP(categoryId);??
  190. ????????????????????????String?categoryName?=?category.getCategoryName();??
  191. ????????????????????????String?alias?=?friendurlTemp.getAlias();??
  192. ????????????????????????String?address?=?friendurlTemp.getAddress();??
  193. ????????????????????????String?texturl?=?friendurlTemp.getTexturl();??
  194. ????????????????????????String?imageurl?=?friendurlTemp.getImageurl();??
  195. ????????????????????????String?description?=??friendurlTemp.getDescription();??
  196. ????????????????????????Date?validbegintime?=?friendurlTemp.getValidbegintime();??
  197. ????????????????????????Date?validendtime?=?friendurlTemp.getValidendtime();??
  198. ????????????????????????String?mobile?=?friendurlTemp.getMobile();??
  199. ????????????????????????int?sequence?=?friendurlTemp.getSequence();??
  200. ????????????????????????int?filter?=?friendurlTemp.getFilter();??
  201. ??????????????????????????
  202. ?????????????????%>??
  203. ??
  204. ????????????????<tr?class="package_list">??
  205. ????????????????????<td?width="7%"?height="20"?align="center"?class="urlid_td"><input?type="checkbox"?name="urlid"?class="id_select?urlid"?value=<%=?urlId%>?/></td>??
  206. ????????????????????<td?width="7%"?height="20"?align="center"?class="edit?sitename"><%=siteName?%></td>??
  207. ????????????????????<td?width="7%"?height="20"?align="center"?class="edit?alias"><%=alias?%></td>??
  208. ????????????????????<td?width="7%"?height="20"?align="center"?class="edit?categoryName"><%=categoryName%></td>??
  209. ????????????????????<td?width="7%"?height="20"?align="center"?class="edit?address"><%=address?%></td>??
  210. ????????????????????<td?width="7%"?height="20"?align="center"?class="edit?texturl"><%=texturl%></td>??
  211. ????????????????????<td?width="7%"?height="20"?align="center"?class="edit_img?imageurl"><%if("".equals(imageurl)||?imageurl?==?null){?}else{%><img?src='<%=imageurl%>'?class='logo'?title='<%=imageurl%>'/><%}?%></td>??
  212. ????????????????????<td?width="7%"?height="20"?align="center"?class="edit?description"><%=description%></td>??
  213. ????????????????????<td?width="7%"?height="20"?align="center"?class="edit?validbegintime"><%=validbegintime?==?null?||?"".equals(validbegintime)??"--:--"?:?TimeUtil.date2Str(validbegintime)%></td>??
  214. ????????????????????<td?width="7%"?height="20"?align="center"?class="edit?validendtime"><%=validendtime?==?null?||?"".equals(validendtime)??"--:--"?:?TimeUtil.date2Str(validendtime)%></td>??
  215. ????????????????????<td?width="7%"?height="20"?align="center"?class="edit?mobile"><%=mobile%></td>??
  216. ????????????????????<td?width="7%"?height="20"?align="center"?class="edit?sequence"><%=sequence%></td>??
  217. ????????????????????<td?width="7%"?height="20"?align="center"?class="edit?filter"><%=filter%></td>??
  218. ???????????????</tr>??
  219. ??
  220. ????????????????<%??
  221. ??????????????????????
  222. ????????????????????}??
  223. ??????????????????????????
  224. ?????????????????%>??
  225. ????????????????
  226. ???????????????<tr>??
  227. ????????????????????<td?align="center"><input?type="button"?id="del"?value="删除"?/></td>??
  228. ????????????????????<td?align="center"?colspan?=?"12">提示：双击选框修改属性值(<font?style="color:red">拖拽LOGO调整顺序</font>)</td>??
  229. ????????????????</tr>??
  230. ??????????????</tbody>??
  231. ????????????</table>??
  232. ????????</div>??
  233. ????????<%@?include?file="inc/pagination.jsp"%>??
  234. ????</div>??
  235. ????<%??
  236. ????????}??
  237. ?????%>??
  238. ?<iframe?name='hidden_frame'?id="hidden_frame"?style='display:none'></iframe>??
  239. </body>??
  240. </html>??
  相关解决方案

代码迷 - 您身边的软件异常，代码异常，编程异常助手（发现，解决，分享）
Copyright © 2009-2013 DAIMAMI.COM. All rights reserved.