java实现表格tr拖动的实例(分享)

时间：2021-05-19

实现功能：实现表格tr拖动，并保存因为拖动改变的等级.

jsp代码

<div id="mainContainer"> <div class="contentCol"> <div id="b_center"> <div class="mod mod1 parent-table" id="launch-detail-table"> <div class="mod-header radius"> <h2 style="margin-bottom:0px;margin-top:0px;height:43px;line-height:43px;"> 菜单管理 </h2> <span style="color:red">请使用拖拽调整排列顺序</span> <button id="addLG" type="button" class="czbtn add_class" style="width:140px;margin-left:20px;"> <img alt="" src="/center/images/btn_add.png">   添加菜单</button> </div> <br> <div class="mod-body"> <table class="data-load-2 appgrouping" width="100%" border="0" cellspacing="0" id="showTable" style="word-wrap: break-word; word-break: break-all;table-layout: inherit;background:#FFFFFF !important;"> <thead> <tr class="first_tr" > <th class="first" width="50" style="text-align: center;width:10%;">编号</th> <th width="400" align="center" style="text-align: center;width:17%">菜单名称</th>  <th width="100" 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 width="210" 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 class="menuName"><%=menu.getMenuName()%></div> </td> <td> <div class="menuName"><%=menu.getEnMenuName()==null?"":menu.getEnMenuName()%></div> </td>  <td> <div class="menuName"><%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)" class="showState czbtn">显示</button> <button type="button" class="czbtn" style="background: #eaeaea;color: #d0d0d0;">已隐藏</button> <%}else{ %> <button type="button" class="czbtn" style="background: #eaeaea;color: #d0d0d0;">已显示</button> <button type="button" onclick="changeMenuState('<%=menu.getMenuName() %>',<%=menu.getMenuId() %>,0)" class="hideState czbtn">隐藏</button> <%} %> </td> <td> <%if(menu.getMenuType() != 0) {%><div> <div style="float: right;margin-right:10px;"> <a title="删除" href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" style="color:red;width:30px;display:inline-block;" id="<%=menu.getMenuId()%>" class="icon-trash delMtCenter"> </a> </div> <%} %> <%if(menu.getMenuType() != 0) {%> <div style="float: right;margin-right:10px;"> <a title="修改" href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" style="color:red;width:30px;display:inline-block;" id="<%=menu.getMenuId()%>" class="icon-pencil mer_mod"> </a> </div> <%} %> </td> </tr> <% } } else { %> <tr> <td colspan="6" align="center"> 暂无数据 </td> </tr> <% } %> </tbody> </table> </div> <div class="mod-bottom clearfix"> <div class="fr pagination"></div> </div> </div> </div> </div> </div> </div> </div> <div class="ft" style="height: 50px;line-height: 50px;"> <div class="copyright" 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 class="copy">Incongress.com, All Rights Reserved.<span class="ICP"></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 class="tkDiv" id="addLOGO" style="display:none;z-index:12;width:800px;height:auto;margin-left:-50px;"> <div class="tk1_header" style="width:800px !important;height:40px;line-height:40px;margin-left:-10px;margin-top:-10px;"> <span style="font-size: 16px;margin-left:20px;color:#FFF;margin-top:-5px;" id="gn_title" >添加菜单</span> <a id="close_modal" style="width:30px;height:20px;background:url('/CHC2015/cn/images/close.png') no-repeat 0px 10px;float: right;">×</a> </div> <div class="tk1" id="addZ" style="width:790px;height:260px;margin-left:-2px;overflow-y:auto;"> <div class="tk1_content" id="registerDiv" style="width:750px;margin-top:-10px;"> <form id="menuForm" class="bs-docs-example form-horizontal" 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 style="width:750px"> <tr > <td><span >菜单名称</span></td> <td><input type="text" id="menu_name" class="form-control" name="menuName" style="margin:10px 0px;display:inline-block;height:34px;"/><span class="showWoring"></span></td> </tr>  <tr> <td>菜单类型</td> <td> <select id="menuType" class="form-control" 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" class="form-control" 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://</br><input type="text" id="menuUrl" name="menuUrl" style="margin:10px 0px"/><span class="showWoring" style="margin:10px 0px"></span></td> </tr> <tr> <td align="center" colspan="2"> <hr style="margin-bottom:10px;"> <input id="menu_add" type="button" class="button" value="添　加" style="border-radius:0;width:260px;height:40px;margin:auto 50px;margin:20px"/> </td> </tr> </table> </form> </div> </div> </div> <div class="tkDiv" id="childMenu" style="display:none;z-index:12;width:650px;height:auto;margin-left:-325px;"> <div class="tk1" id="childZ" style="width:600px;height:350px;"> <div class="tk1_header" style="margin-top:-40px;"> <span style="font-size: 16px;margin-left:20px;color:#FFF" id="gn_title">二级菜单</span> <a id="close_modal" style="width:30px;height:40px;background:url('/CHC2015/cn/images/close.png') no-repeat 0px 10px;background-size:20px;float: right;"></a> </div> <div class="tk1_content" id="registerDiv" style="width:600px;"> <table class="data-load-2 appgrouping" width="100%" border="0" cellspacing="0" style="word-wrap: break-word; word-break: break-all;table-layout: inherit;"> <thead> <tr class="first_tr"> <th class="first" width="50" style="text-align: center">编号</th> <th width="200" align="center" style="text-align: center">菜单名称</th> <th width="160" align="center" style="text-align: center">菜单级别</th> <th width="80" align="center" style="text-align: center">二级菜单</th> <th width="80" align="center" style="text-align: center">菜单类型</th> <th width="80" align="center" style="text-align: center">修改</th> <th width="80" 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 == "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拖动的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

java实现表格tr拖动的实例(分享)

相关文章

jQuery+ajax实现动态添加表格tr td功能示例

JavaScript实现梯形乘法表的方法

jQuery实现为table表格动态添加或删除tr功能示例

java实现表格数据的存储

java数字和中文算数验证码的实现