實現功能：實現表格tr拖動，並保存因為拖動改變的等級.
jsp代碼
<div id="mainContainer"> <div> <div id="b_center"> <div id="launch-detail-table"> <div> <h2 style="margin-bottom:0px;margin-top:0px;height:43px;line-height:43px;"> 菜單管理</h2> <span style="color:red">請使用拖拽調整排列順序</span> <button id="addLG" type="button"> <img src="/center/images/btn_add.png">添加菜單</button> </div> <br> <div> <table cellspacing="0" id="showTable" style="word-wrap: break-word; word-break: break-all;table-layout: inherit;background:#FFFFFF !important;"> <thead> <tr > <th style="text-align: center;width:10%;">編號</th> <th align="center" style="text-align: center;width:17%">菜單名稱</th> <!-- <th align="center" style="text-align: center">菜單級別</th> <th align="center" style="text-align: center">二級菜單</th>--> <th align="center" style="text-align: center;width:18%">菜單英文名稱</th> <th align="center" style="text-align: center;width:15%">菜單類型</th> <th align="center" style="text-align: center;width:20%">是否顯示</th> <th align="center" style="text-align: center;width:20%">操作</th> </tr> </thead> <tbody id="data-list" style="text-align: center;"> <% if (menuList != null && menuList.size() > 0) { for (int i = 0;i < menuList.size();i++) { JSONObject json = menuList.getJSONObject(i); Menu menu = (Menu)JSONObject.toBean(json.getJSONObject("menu"),Menu.class); %> <tr id="<%=menu.getLevel() %>"> <td id="<%=menu.getMenuId() %>"> <%=menu.getLevel()%> </td> <td> <div><%=menu.getMenuName()%></div> </td> <td> <div><%=menu.getEnMenuName()==null?"":menu.getEnMenuName()%></div> </td> <!-- <td> <div><%//if(menu.getHasSecond() == 1){%>一級菜單<%//}else{%>二級菜單<%//}%></div> </td> <td> <div><%//if(json.getString("isChild").equals("1")){%><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="getChildMenu('<%//menu.getMenuId()%>')">查看</a><%//} else{%>無<%//}%></div> </td> --> <td> <div><%if(menu.getMenuType() == 0){%>系統類型<%}else if(menu.getMenuType() == 1){%>圖文類型<%}else{%>鏈接類型<%}%></div> </td> <td> <%if(menu.getState() == 0){ %> <button type="button" onclick="changeMenuState('<%=menu.getMenuName() %>',<%=menu.getMenuId() %>,1)">顯示</button> <button type="button" style="background: #eaeaea;color: #d0d0d0;">已隱藏</button> <%}else{ %> <button type="button" style="background: #eaeaea;color: #d0d0d0;">已顯示</button> <button type="button" onclick="changeMenuState('<%=menu.getMenuName() %>',<%=menu.getMenuId() %>,0)">隱藏</button> <%} %> </td> <td> <%if(menu.getMenuType() != 0) {%><div> <div style="float: right;margin-right:10px;"> <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" style="color:red;width:30px;display:inline-block;" id="<%=menu.getMenuId()%>"> </a> </div> <%} %> <%if(menu.getMenuType() != 0) {%> <div style="float: right;margin-right:10px;"> <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" style="color:red;width:30px;display:inline-block;" id="<%=menu.getMenuId()%>"> </a> </div> <%} %> </td> </tr> <% } } else { %> <tr> <td colspan="6" align="center"> 暫無數據</td> </tr> <% } %> </tbody> </table> </div> <div> <div></div> </div> </div> </div> </div> </div> </div> </div> <div style="height: 50px;line-height: 50px;"> <div style="display: none;"> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >關於我們</a> | <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >微博</a> | <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Blog</a> | <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >服務條款</a> | <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >隱私政策</a> </div> <p>Incongress.com, All Rights Reserved.<span></span></p> </div> <script src="/cvc/center/js/cached_lay_reports.js" type="text/javascript"></script> <script src="/cvc/center/js/cached_lay_reports_cus.js" type="text/javascript"></script> <div id="mask"></div> <div id="addLOGO" style="display:none;z-index:12;width:800px;height:auto;margin-left:-50px;"> <div> <span style="font-size: 16px;margin-left:20px;color:#FFF;margin-top:-5px;" id="gn_title" >添加菜單</span> <a id="close_modal">×</a> </div> <div id="addZ"> <div id="registerDiv"> <form id="menuForm" method="post" action="<%=path %>/webCenter.do"> <input type="hidden" name="method" value="saveOrUpdateMenu"> <input type="hidden" name="pageIndex" value="1"> <input type="hidden" name="conId" value="<%=conId %>"> <input type="hidden" name="numb1" value="<%=numb1 %>"> <input type="hidden" name="numb2" value="<%=numb2 %>"> <input type="hidden" id="menuId" name="menuId" value="-1"> <table> <tr > <td><span >菜單名稱</span></td> <td><input type="text" id="menu_name" name="menuName" style="margin:10px 0px;display:inline-block;height:34px;"/><span></span></td> </tr> <!-- <tr> <td>菜單級別：</td> <td> <select id="menu_level" name="menu_level" style="margin:10px 0px"> <option value="-1">請選擇...</option> <option value="1">一級菜單</option> <option value="2">二級菜單</option> </select> <span></span> </td> </tr> <tr id="menu_parent_tr" style="display: none"> <td>父級菜單：</td> <td> <select id="menu_parent" name="menu_parent" style="margin:10px 0px"> <option value="-1">請選擇...</option> </select> <span></span> </td> </tr>--> <tr> <td>菜單類型</td> <td> <select id="menuType" name="menuType" style="margin:10px 0px;display:inline-block;width:350px;"> <option value="-1">請選擇...</option> <option value="1">圖文類型</option> <option value="2">鏈接類型</option> </select> </td> </tr> <tr id="imgTextTr" style="display:none"> <td> 圖文內容</td> <td> <textarea rows="45" cols="70" name="menuContent" id="menuContent" style="display:inline-block;"></textarea> </td> </tr> <tr id="linkTr" style="display:none"> <td>跳轉地址</td> <td>請填寫完整的外鏈地址，必須包含<span style="color:red">http://</span>例如:http://www.baidu.com</br><input type="text" id="menuUrl" name="menuUrl" style="margin:10px 0px"/><span style="margin:10px 0px"></span></td> </tr> <tr> <td align="center" colspan="2"> <hr style="margin-bottom:10px;"> <input id="menu_add" type="button" value="添加" style="border-radius:0;width:260px;height:40px;margin:auto 50px;margin:20px"/> </td> </tr> </table> </form> </div> </div> </div> <div id="childMenu" style="display:none;z-index:12;width:650px;height:auto;margin-left:-325px;"> <div id="childZ"> <div style="margin-top:-40px;"> <span style="font-size: 16px;margin-left:20px;color:#FFF" id="gn_title">二級菜單</span> <a id="close_modal"></a> </div> <div id="registerDiv"> <table cellspacing="0" style="word-wrap: break-word; word-break: break-all;table-layout: inherit;"> <thead> <tr> <th style="text-align: center">編號</th> <th align="center" style="text-align: center">菜單名稱</th> <th align="center" style="text-align: center">菜單級別</th> <th align="center" style="text-align: center">二級菜單</th> <th align="center" style="text-align: center">菜單類型</th> <th align="center" style="text-align: center">修改</th> <th align="center" style="text-align: center">刪除</th> </tr> </thead> </table> </div> </div> </div> <script type="text/javascript" src="<%=path %>/cvc/center/js/My97DatePicker/WdatePicker.js"></script> <script src="<%=path%>/cvc/center/js/setting.js" type="text/javascript"></script> <script src="<%=path%>/cvc/center/js/Validform_v5.3.2.js" type="text/javascript"></script> <script charset="utf-8" src="<%=path%>/train/js/prettify/kindeditor.js"></script> <script charset="utf-8" src="<%=path%>/train/js/prettify/lang/zh_CN.js"></script> <script charset="utf-8" src="<%=path%>/train/js/prettify/plugins/code/prettify.js"></script> <script type="text/javascript" src="<%=path %>/cvc/center/js/jquery-1.10.2.min.js"></script> <script charset="utf-8" type="text/javascript" src="<%=path %>/center/js/jquery-ui.min.js"></script> <script> var editor1; //改變菜單顯示隱藏狀態function changeMenuState(menuName,menuId,state){ /* if(menuName == "徵文投稿"){ alert("請到基本信息模塊中設置當前大會是否徵文"); }else */if(menuName == "English"){ alert("請到基本信息模塊中設置當前大會的中英文類型"); }else{ $.ajax({ url:"/webCenter.do", type:"post", dataType:"json", data:"method=changeMenuState&menuId="+menuId+"&menuState="+state, success:function(json){ if(json.state == 1){ window.location.reload(); }else{ alert("修改失敗"); } } }) } } $("#showTable").sortable({ cursor: "move", items: "tr", //只是tr可以拖動opacity: 0.6, //拖動時，透明度為0.6 revert: true, //釋放時，增加動畫stop: function(event, ui) { //更新排序之後var categoryids = $("#showTable").sortable("toArray"); localStorage.categoryids = categoryids; var level = 0; $("#showTable tr").each(function(){ $(this).children("td").eq(0).html(level); level += 1; }) level = 0; var content = "["; $("#showTable tr").each(function(){ var level = $(this).children("td").eq(0).html(); var tdId = $(this).children("td").eq(0).attr("id"); if(tdId != undefined){ if(level == 1){ content += "{level:"+level; content += ",menuId:"+tdId; content += "}"; }else if(level > 1){ content += ",{level:"+level; content += ",menuId:"+tdId; content += "}"; } } level += 1; }) content += "]"; $.ajax({ url:"<%=path%>/webCenter.do?updateMenuLevel", type:"post", dataType:"json", data:"menuList="+content, success:function(json){ } }) } }); $("#showTable").disableSelection();//讓文字不可選//選擇二級菜單$("#menu_level").change(function(){ $("#menu_parent").empty(); $("#menu_parent").append("<option value='-1'>請選擇...</option>") var level = $("#menu_level").val(); if(level == 1){ $("#menu_parent_tr").hide(); }else if(level == 2){ $.ajax({ url:"<%=path%>/webCenter.do?getFirstMenu", type:"GET", dataType:"json", success:function(result){ if(result != null && result != "" && result.length > 0){ for(var i = 0; i< result.length;i++){ var option = "<option value='"+result[i].menuId+"'>"+result[i].menuName+"</option>" console.log(option) $("#menu_parent").append(option); } }else{ alert("還未創建任何一級菜單，先創建一級菜單後再創建耳機菜單"); } } }) $("#menu_parent_tr").show(); } }) //選擇圖文類型$("#menuType").change(function(){ if($("#menuType").val() == 1){ $("#imgTextTr").show(); $("#linkTr").hide(); $("#addZ").css("height","450px") }else if($("#menuType").val() == 2){ $("#imgTextTr").hide(); $("#linkTr").show(); $("#addZ").css("height","180px") } }) //添加$("#menu_add").click(function() { var menuName = $("#menu_name").val(); var menuLevel = $("#menu_level").val(); var menuType = $("#menuType").val(); var menuUrl = $("#menuUrl").val(); if(menuName.trim() == "" || menuName.trim().length == 0){ alert("請輸入菜單名稱"); return false; } if(menuType == "-1"){ alert("請選擇菜單類型"); return false; } if($("#menuType").val() == 1){ if($("#menuContent").val().trim() == "" || $("#menuContent").val().trim().length == 0){ alert("請填寫圖文內容"); return false; } } if($("#menuType").val() == 2){ if(menuUrl.trim() == "" || menuUrl.trim().length == 0){ alert("請輸入跳轉地址"); return false; } } var menuCount = <%=menuListSize%>; if(menuCount >= 19 && $("#menuId").val() == -1){ alert("菜單最多只能添加九個"); return false; } $("#menuForm").submit(); $("#mask").hide(); $("#addLOGO").hide(); $("body").css("position", "fixed"); }) //彈出窗口$("#addLG").click(function() { $("#mask").show(); $("#addLOGO").show(); }) //取消$(".tk1_header").click(function() { location.reload(); }) $("#close").click(function() { $("#zsType").val(0); $("#zsHref").val(""); $("#mask").hide(); $("#addLOGO").hide(); $("body").css("position", "static"); }) //修改$(".mer_mod").click(function() { $("#mask").show(); $("#addLOGO").show(); $("body").css("position", "fixed"); $("#menuId").val(this.id); $.ajax({ url:"<%=path%>/webCenter.do?getMenuById", type:"get", data:"menuId="+this.id, dataType:"json", success:function(data){ $("#menu_name").val(data.menuName); $("#menuType").val(data.menuType); if(data.menuType == 1){ $("#imgTextTr").show(); $("#linkTr").hide(); $("#addZ").css("height","450px") editor1.html(data.content); }if(data.menuType == 2){ $("#imgTextTr").hide(); $("#linkTr").show(); $("#addZ").css("height","80px") } } }) })</script> </body></html><% }}%>action代碼
@RequestMapping(params = "updateMenuLevel",method = RequestMethod.POST) public void updateMenuLevel(String menuList,HttpServletRequest request,HttpServletResponse response){ try { HttpSession session = this.getSession(request); Adminuser adminUser = session.getAttribute("centerAdminUser") == null?null:(Adminuser) session.getAttribute("centerAdminUser"); if(adminUser == null){ try { response.sendRedirect(request.getContextPath()+"/center/index.jsp"); } catch (Exception e) { e.printStackTrace(); } }else{ String conId = request.getSession().getAttribute("conId") == null ? null: request.getSession().getAttribute("conId").toString(); if (conId == null) { response.sendRedirect(request.getContextPath()+"/center/index.jsp"); } JSONArray array = JSONArray.fromObject(menuList); for(int i = 0;i < array.size();i++){ JSONObject json = array.getJSONObject(i); Menu menu = webService.getMenuById(json.getInt("menuId")); menu.setLevel(json.getInt("level")); webService.saveObject(menu); } } } catch (Exception e) { e.printStackTrace(); }以上這篇java實現表格tr拖動的實例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。