实现功能：实现表格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拖动的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持武林网。