Implementation function: implement table t dragging and save the level changed due to dragging.
jsp code
<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;"> Menu Management</h2> <span style="color:red">Please use drag and drop to adjust the order</span> <button id="addLG" type="button"> <img src="/center/images/btn_add.png">Add menu</button> </div> <br> <div> <table cellpacing="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%;">number</th> <th align="center" style="text-align: center;width:17%">menu name</th> <!-- <th align="center" style="text-align: center">menu level</th> <th align="center" style="text-align: center">menu level</th> <th align="center" style="text-align: Center">Second-level menu</th>--> <th align="center" style="text-align: center;width:18%">Menu English name</th> <th align="center" style="text-align: center;width:15%">Menu Type</th> <th align="center" style="text-align: center;width:20%">Whether it is displayed</th> <th align="center" style="text-align: center;width:20%">Operation</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){%>First-level menu <%//}else{%>Second-level menu <%//}%></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()%>')">View</a><%//} else{%>None<%//}%></div> </td> --> <td> <div><%if(menu.getMenuType() == 0){%>System type<%}else if(menu.getMenuType() == 1){%>Text type<%}else{%>Link type<%}%></div> </td> <td> <%if(menu.getState() == 0){ %> <button type="button" onclick="changeMenuState('<%=menu.getMenuName() %>',<%=menu.getMenuId() %>,1)">Show</button> <button type="button" style="background: #eaeaea;color: #d0d0d0;">Hide</button> <%}else{ %> <button type="button" style="background: #eaeaea;color: #d0d0d0;">Show</button> <button type="button" onclick="changeMenuState('<%=menu.getMenuName() %>',<%=menu.getMenuId() %>,0)">Hide</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" 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"> No data yet</td> </tr> <% } %> </tbody> </table> </div> <div> <div></div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </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" >About us</a> | <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Weibo</a> | <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" nofollow" >Blog</a> | <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Terms of Service</a> | <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Privacy Policy</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" >Add menu</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 >Menu Name</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> Menu Level: </td> <td> <select id="menu_level" name="menu_level" style="margin:10px 0px"> <option value="-1">Please select...</option> <option value="1">First level menu</option> <option value="2">Second level menu</option> </select> <span></span> </td> </tr> <tr id="menu_parent_tr" style="display: none"> <td>Parent menu: </td> <td> <select id="menu_parent" name="menu_parent" style="margin:10px 0px"> <option value="-1">Please select...</option> </select> <span></span> </td> </td> </tr>--> <tr> <td> Menu type</td> <td> <select id="menuType" name="menuType" style="margin:10px 0px;display:inline-block;width:350px;"> <option value="-1">Please select...</option> <option value="1">Picture type</option> <option value="2">link type</option> </select> </td> </tr> <tr id="imgTextTr" style="display:none"> <td> Text content</td> <td> <textarea rows="45" cols="70" name="menuContent" id="menuContent" style="display:inline-block;"></textarea> </td> </td> <tr id="linkTr" style="display:none"> <td>Jump address</td> <td>Please fill in the complete external link address, which must include <span style="color:red">http://</span>For example: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="add" style="border-radius:0;width:260px;height:40px;margin:auto 50px;margin:20px"/> </td> </tr> </table> </form> </div> </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">Second-level menu</span> <a id="close_modal"></a> </div> <div id="registerDiv"> <table cellpacing="0" style="word-wrap: break-word; word-break: break-all;table-layout: inherit;"> <thead> <tr> <th style="text-align: center">Number</th> <th align="center" style="text-align: center">Menu Name</th> <th align="center" style="text-align: center">Menu Level</th> <th align="center" style="text-align: center">Second-level menu</th> <th align="center" style="text-align: center">Menu Type</th> <th align="center" style="text-align: center">Modify</th> <th align="center" style="text-align: center">Delete</th> </tr> </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 %>/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; //Change menu display hidden state function changeMenuState(menuName,menuId,state){ /* if(menuName == "Essay contribution"){ alert("Please go to the basic information module to set whether the current conference is compiling"); }else */if(menuName == "English"){ alert("Please go to the basic information module to set the current conference Chinese and English type"); }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("modify failed"); } } }) } } $("#showTable").sortable({ cursor: "move", items: "tr", //Only tr can drag opacity: 0.6, //When dragging, the transparency is 0.6 revert: true, // When releasing, add animation stop: function(event, ui) { //After updating the sorting 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();//Make the text unselectable//Select the secondary menu $("#menu_level").change(function(){ $("#menu_parent").empty(); $("#menu_parent").append("<option value='-1'>Please select...</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("No level menu has been created yet, create the first level menu before creating the headphone menu"); } } }) $("#menu_parent_tr").show(); } }) //Select the graphic type $("#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") } }) //Add $("#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("Please enter the menu name"); return false; } if(menuType == "-1"){ alert("Please select menu type"); return false; } if($("#menuType").val() == 1){ if($("#menuContent").val().trim() == "" || $("#menuContent").val().trim().length == 0){ alert("Please fill in the text and text content"); return false; } } if($("#menuType").val() == 2){ if(menuUrl.trim() == "" || menuUrl.trim().length == 0){ alert("Please enter the jump address"); return false; } } var menuCount = <%=menuListSize%>; if(menuCount >= 19 && $("#menuId").val() == -1){ alert("The menu can only add up to nine"); return false; } $("#menuForm").submit(); $("#mask").hide(); $("#addLOGO").hide(); $("body").css("position", "fixed"); }) //Popt-up $("#addLG").click(function() { $("#mask").show(); $("#addLOGO").show(); }) //Cancel $(".tk1_header").click(function() { location.reload(); }) $("#close").click(function() { $("#zsType").val(0); $("#zsHref").val(""); $("#mask").hide(); $("#addLOGO").hide(); $("body").css("position", "static"); }) //Modify $(".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 code
@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(); }The above example of Java implementation table t dragging is all the content I have shared with you. I hope you can give you a reference and I hope you can support Wulin.com more.