读书人
栏目▼

jquery Sortable范例

发布时间： 2012-06-29 15:48:46 作者： rapoo

jquery Sortable实例

?

?

?

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

读书人网 >Web前端

热点推荐

触屏版 | 电脑版

读书人网 m.reader8.net