java如何實現表格tr拖動

這篇文章將為大家詳細講解有關java如何實現表格tr拖動，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

Java的優點是什么

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">&nbsp;&nbsp;&nbsp;添加菜單</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" >&times;</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>&nbsp;例如: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拖動”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。