菜鸟做的treetable的应用实例

最新推荐文章于 2024-04-26 15:30:27 发布

peizhe12321

最新推荐文章于 2024-04-26 15:30:27 发布

阅读量541

点赞数

文章标签： c# javascript json ViewUI

首先，最近在实习，以前动手能力太差，基本没有编成的经历，现在脑子抽筋读了研究生，导师公司派去实习第一次就差点把我搞挂了，哎，万事开头难，现在知道自己要学的实在太多了说多了都是泪

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请求就可以成功*/

peizhe12321

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
菜鸟做的treetable的应用实例

首先，最近在实习，以前动手能力太差，基本没有编成的经历，现在脑子抽筋读了研究生，导师公司派去实习第一次就差点把我搞挂了，哎，万事开头难，现在知道自己要学的实在太多了说多了都是泪1.注意要引入treetable和jquery，不过网上大把的有，貌似都是静态的，现在这个虽然能层级显示，但是不能拖拽排序，是一个大问题，看看最近学习能不能解决代码如下：&lt;pre name="code" class=...
复制链接

扫一扫