java實現(xiàn)表格tr拖動的實例(分享)
更新時間：2017年12月20日 13:55:08 作者：向往的生活
下面小編就為大家分享一篇java實現(xiàn)表格tr拖動的實例。具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
實現(xiàn)功能：實現(xiàn)表格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">請使用拖拽調(diào)整排列順序</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="160" align="center" style="text-align: center">菜單級別</th>
<th width="80" align="center" style="text-align: center">二級菜單</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="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){%>系統(tǒng)類型<%}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">
暫無數(shù)據(jù)
</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" >關(guān)于我們</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" >服務(wù)條款 </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="menu_level" name="menu_level" style="margin:10px 0px">
<option value="-1">請選擇...</option>
<option value="1">一級菜單</option>
<option value="2">二級菜單</option>
</select>
<span class="showWoring"></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 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>
圖文內(nèi)容
</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>跳轉(zhuǎn)地址</td>
<td>請?zhí)顚懲暾耐怄湹刂?，必須包?lt;span style="color:red">http://</span> 例如:http://www.baidu.com</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;
//改變菜單顯示隱藏狀態(tài)
function changeMenuState(menuName,menuId,state){
/*
if(menuName == "征文投稿"){
alert("請到基本信息模塊中設(shè)置當(dāng)前大會是否征文");
}else */if(menuName == "English"){
alert("請到基本信息模塊中設(shè)置當(dāng)前大會的中英文類型");
}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("還未創(chuàng)建任何一級菜單，先創(chuàng)建一級菜單后再創(chuàng)建耳機(jī)菜單");
}
}
})
$("#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("請?zhí)顚憟D文內(nèi)容");
return false;
}
}
if($("#menuType").val() == 2){
if(menuUrl.trim() == "" || menuUrl.trim().length == 0){
alert("請輸入跳轉(zhuǎn)地址");
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實現(xiàn)表格tr拖動的實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
本文給大家介紹在JavaWeb開發(fā)中alias攔截器的使用方法相關(guān)知識，本文介紹的非常詳細(xì)，具有參考借鑒價值，感興趣的朋友一起看下吧2016-08-08
Mybatis使用update更新值為null時不生效問題解決
這篇文章主要介紹了Mybatis使用update更新值為null時不生效問題解決,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-06-06
Spring?Security權(quán)限注解啟動及邏輯處理使用示例
這篇文章主要為大家介紹了Spring?Security權(quán)限注解啟動及邏輯處理使用示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
這篇文章主要介紹了java反射耗時測試案例解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-10-10
如果有?個操作，多次執(zhí)?與?次執(zhí)?所產(chǎn)?的影響是相同的，我們就稱這個操作是冪等的。當(dāng)出現(xiàn)消費(fèi)者對某條消息重復(fù)消費(fèi)的情況時，重復(fù)消費(fèi)的結(jié)果與消費(fèi)?次的結(jié)果是相同的，并且多次消費(fèi)并未對業(yè)務(wù)系統(tǒng)產(chǎn)?任何負(fù)?影響，那么這整個過程就可實現(xiàn)消息冪等2023-02-02
這篇文章主要介紹了java使用jar包生成二維碼的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
今天小編就為大家分享一篇關(guān)于Java三種方法將List轉(zhuǎn)換為Map的實例，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2018-10-10
這篇文章主要為大家詳細(xì)介紹了JAVA遞歸與非遞歸實現(xiàn)斐波那契數(shù)列，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-02-02
在本文中，我們將介紹注解的基礎(chǔ)知識，包括注解是什么，它們?nèi)绾卧谑纠惺褂茫约叭绾翁幚硭鼈?。下面和小編一起來學(xué)習(xí)吧2019-05-05
本文詳細(xì)介紹了Hadoop NameNode高可用機(jī)制的各個方面內(nèi)容，NameNode 的可用性直接決定了 Hadoop 集群的可用性，感興趣的小伙伴可以參考本文章2021-08-08