这篇文章将为大家详细讲解有关java如何实现表格tr拖动,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
1. 简单,只需理解基本的概念,就可以编写适合于各种情况的应用程序;2. 面向对象;3. 分布性,Java是面向网络的语言;4. 鲁棒性,java提供自动垃圾收集来进行内存管理,防止程序员在管理内存时容易产生的错误。;5. 安全性,用于网络、分布环境下的Java必须防止病毒的入侵。6. 体系结构中立,只要安装了Java运行时系统,就可在任意处理器上运行。7. 可移植性,Java可以方便地移植到网络上的不同机器。8.解释执行,Java解释器直接对Java字节码进行解释执行。
实现功能:实现表格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"> <h3 > 菜单管理 </h3> <span >请使用拖拽调整排列顺序</span> <button id="addLG" type="button" class="czbtn add_class" > <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" > <thead> <tr class="first_tr" > <th class="first" width="50" >编号</th> <th width="400" align="center" >菜单名称</th> <!-- <th width="160" align="center" >菜单级别</th> <th width="80" align="center" >二级菜单</th>--> <th width="100" align="center" >菜单英文名称</th> <th align="center" >菜单类型</th> <th align="center" >是否显示</th> <th width="210" align="center" >操作</th> </tr> </thead> <tbody id="data-list" > <% 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="menuLevel"><%//if(menu.getHasSecond() == 1){%>一级菜单<%//}else{%>二级菜单<%//}%></div> </td> <td> <div class="isChild"><%//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 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" >已隐藏</button> <%}else{ %> <button type="button" class="czbtn" >已显示</button> <button type="button" onclick="changeMenuState('<%=menu.getMenuName() %>',<%=menu.getMenuId() %>,0)" class="hideState czbtn">隐藏</button> <%} %> </td> <td> <%if(menu.getMenuType() != 0) {%><div> <div > <a title="删除" href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="<%=menu.getMenuId()%>" class="icon-trash delMtCenter"> </a> </div> <%} %> <%if(menu.getMenuType() != 0) {%> <div > <a title="修改" href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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" > <div class="copyright" > <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" > <div class="tk1_header" > <span id="gn_title" >添加菜单</span> <a id="close_modal" >×</a> </div> <div class="tk1" id="addZ" > <div class="tk1_content" id="registerDiv" > <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 > <tr > <td><span >菜单名称</span></td> <td><input type="text" id="menu_name" class="form-control" name="menuName" /><span class="showWoring"></span></td> </tr> <!-- <tr> <td>菜单级别:</td> <td> <select id="menu_level" name="menu_level" > <option value="-1">请选择...</option> <option value="1">一级菜单</option> <option value="2">二级菜单</option> </select> <span class="showWoring"></span> </td> </tr> <tr id="menu_parent_tr" > <td>父级菜单:</td> <td> <select id="menu_parent" name="menu_parent" > <option value="-1">请选择...</option> </select> <span class="showWoring"></span> </td> </tr>--> <tr> <td>菜单类型</td> <td> <select id="menuType" class="form-control" name="menuType" > <option value="-1">请选择...</option> <option value="1">图文类型</option> <option value="2">链接类型</option> </select> </td> </tr> <tr id="imgTextTr" > <td> 图文内容 </td> <td> <textarea rows="45" cols="70" class="form-control" name="menuContent" id="menuContent" ></textarea> </td> </tr> <tr id="linkTr" > <td>跳转地址</td> <td>请填写完整的外链地址,必须包含<span >http://</span> 例如:http://www.baidu.com</br><input type="text" id="menuUrl" name="menuUrl" /><span class="showWoring" ></span></td> </tr> <tr> <td align="center" colspan="2"> <hr > <input id="menu_add" type="button" class="button" value="添 加" /> </td> </tr> </table> </form> </div> </div> </div> <div class="tkDiv" id="childMenu" > <div class="tk1" id="childZ" > <div class="tk1_header" > <span id="gn_title">二级菜单</span> <a id="close_modal" ></a> </div> <div class="tk1_content" id="registerDiv" > <table class="data-load-2 appgrouping" width="100%" border="0" cellspacing="0" > <thead> <tr class="first_tr"> <th class="first" width="50" >编号</th> <th width="200" align="center" >菜单名称</th> <th width="160" align="center" >菜单级别</th> <th width="80" align="center" >二级菜单</th> <th width="80" align="center" >菜单类型</th> <th width="80" align="center" >修改</th> <th width="80" 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拖动”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。