![](https://img-blog.csdn.net/20141027175243423?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcGVpemhlMTIzMg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
首先,最近在实习,以前动手能力太差,基本没有编成的经历,现在脑子抽筋读了研究生,导师公司派去实习第一次就差点把我搞挂了,哎,万事开头难,现在知道自己要学的实在太多了说多了都是泪
1.注意要引入treetable和jquery,不过网上大把的有,貌似都是静态的,现在这个虽然能层级显示,但是不能拖拽排序,是一个大问题,看看最近学习能不能解决
代码如下:<pre name="code" class="java"><script>
$(function() {
var option = {
theme : 'vsStyle',
expandLevel : 1,
beforeExpand : function($treeTable, id) {
//判断id是否已经有了孩子节点,如果有了就不再加载,这样就可以起到缓存的作用
if ($('.' + id, $treeTable).length) {
return;
}
//这里的html是ajax请求
var xmlHttp;
if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
} else {// code for IE6, IE5
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
var data='';
xmlHttp.open("GET", "catalogList?parentId=" + parseInt(id), true);
xmlHttp.send();
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
//alert(xmlHttp.responseText);
data = eval("(" + xmlHttp.responseText + ")");
var html = "";
for (i = 0; i < data.length; i++)
{
html += '<tr id="'+data[i].id+'" pId="'+data[i].parentId+'">';
html += '<td width="20px" class="list_td_cbox"></td>';
html += '<td colspan="2" width="485px" title="'+data[i].title+'"><input type="checkbox" > <a href="">'
+ data[i].title + '</a></td>';
html += '<td width="150px" >' + data[i].sortid
+ '</td>';
html += "<td width='150px'>" + data[i].creatorNick
+ "</td>";
html += "<td width='150px'>" + data[i].createdTime
+ "</td>";
html += "<td width='160px'> <a href='catalogEdit?parentId="
+ data[i].parentId
+ "&id="
+ data[i].id
+"'>修改</a>";
html += " " + " ";
html += "<a href='#' οnclick=doConfirm('catalogDelete?parentId="
+ data[i].parentId
+ "&ids="
+ data[i].id
+ "')>删除</a>";
html += "</td></tr>";
}
$treeTable.addChilds(html);
}
}
},
onSelect : function($treeTable, id) {
window.console && console.log('onSelect:' + id);
}
};
$('#treeTable1').treeTable(option);
});
</script>
<title>留言分类浏览</title>
</head>
<body>
<table id="head_table" cellpadding="0" cellspacing="0" >
<tr>
<td id="head_where"><a href="./">后台管理</a> >> 留言分类浏览</td>
<td id="head_what"></td>
<td id="head_who"><%UserInfo info = (UserInfo) request.getSession().getAttribute(Constants.BIND_USER_INFO); %><%=info.getAdminUser().getNickName() %></td>
<td id="head_tree"><div class="tree_on"></div></td>
<td id="head_search"><form id="form_search" action="search">
<input id="head_search_input" type="text" name="query">
<input id="head_search_button" type="image" src="../imgs/head_search_button.gif" title="搜索">
</form></td>
</tr>
</table>
<table id="main_table" cellpadding="0" cellspacing="0">
<tr>
<td id="left_nav_td">
<%@include file="include/left_navigate.jsp" %>
</td>
<td id="main_area"><div id="main_area_box"><div id="main_area_box_inner">
<div class="tip_box">
<div class="tip_head">
<span class="tip_head_info">留言分类浏览</span>
</div>
<div class="tip_body">
<div class="tip_body_info">浏览所有的留言分类。</div>
<div class="tip_body_link">
<c:if test="${!empty parentId}">
<a href="catalogList">返回父级分类</a>
</c:if>
<a href="catalogEdit?parentId=${parentId}">新建留言分类</a>
</div>
</div>
</div>
<%@include file="include/tips_warn_err.jsp" %>
<form action="" id="list_form" name="list_form" method="get">
<div class="list_box">
<table class="list_toolbar" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="list_tb_left">
<input type="button" value="删除" οnclick="doAction4Selected('catalogDelete')">
<input type="hidden" id="parentId" name="parentId" value="${parentId}">
</td>
<td class="list_tb_right"></td>
</tr>
</table>
<table id="treeTable1" style="width:100%" class="list_table" cellpadding="0" cellspacing="0" border="0">
<tr>
<th width="20px"></th>
<th><input type="checkbox" οnclick="doSelectAllAtList()" name="checkAllBox" id="checkAllBox"></th>
<th width="485px">分类名称</th>
<th width="150px">排序值</th>
<th width="150px">创建者</th>
<th width="150px">创建时间</th>
<th width="160px">操作</th>
</tr>
<c:forEach var="catalog" items="${list}">
<tr id="${catalog.id}" class="masterNode" haschild="true" >
<td width="20px" class="list_td_cbox"></td><!-- 只是有父类ID -->
<td width="485px" controller="true" title='${catalog.title}' colspan="2"><a href="" οnclick="showChildNodes('show');"><input type="checkbox" id="ids" name="ids" >${catalog.title}</a></td>
<td width="150px" >${catalog.sortid}</td>
<td width="150px" class="list_td_link">${catalog.creatorNick}</td>
<td width="150px"><fmt:formatDate value="${catalog.createTime}" pattern="yyyy-MM-dd HH:mm:ss"></fmt:formatDate></td>
<td width="160px" class="list_td_link">
<a href="catalogEdit?parentId=${catalog.id}">新建子留言分类</a>
<a href="catalogEdit?parentId=${parentId}&id=${catalog.id}">修改</a><!-- 既有子类ID 又有父类ID -->
<a href="#" οnclick="doConfirm('catalogDelete?parentId=${parentId}&ids=${catalog.id}')">删除</a>
</td>
</tr>
</c:forEach>
</table>
</div>
</form>
</div></div></td>
</tr>
</table>
<script type="text/javascript">
$(document).ready(function() {
$("#treeTable1").tableDnD({
//当拖动排序完成后
onDrop: function() {
//获取id为table的元素
var table = document.getElementById("treeTable1");
//获取table元素所包含的tr元素集合
var tr = table.getElementsByTagName("tr");
//遍历所有的tr
for (var i = 0; i < tr.length; i++) {
//获取拖动排序结束后新表格中,row id的结果
var rowid = tr[i].getAttribute("id");
alert("排序完成后表格的第 " + (i+1) + " 行id为 : " + rowid);
alert("hdahjflaljdfak");
}
}
});
});
</script>
<%@include file="include/foot_version.jsp/" %>
</body>
</html>
</pre><pre name="code" class="javascript">
</pre><pre name="code" class="javascript">/*后台是要将数据封装成json格式的,然后ajax请求就可以成功*/