TreeTable使用

JSP

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<spring:eval expression="@config['application.version']" var="applicationVersion" />
<spring:url value="/resources-{applicationVersion}" var="resourceUrl">
	<spring:param name="applicationVersion" value="${applicationVersion}" />
</spring:url>
<script type="text/javascript">
	var ctx = '${pageContext.request.contextPath}';
	var resourceUrl='${resourceUrl}';
</script>
  <link href="${resourceUrl}/common/treetable/styles.css" rel="stylesheet" type="text/css" />
  	<script type="text/javascript" src="${resourceUrl}/common/jquery/jquery-1.11.1.min.js"></script>
  <script type="text/javascript" src="${resourceUrl}/common/jquery.tagthis.js"></script>
  <script type="text/javascript" src="${resourceUrl}/common/treetable/jquery.treetable.js"></script>
  <script src="${resourceUrl}/js/authority/treeTable.js" type="text/javascript"></script>
 </HEAD>
<input type="hidden" id="rootId" value="${rootId }">
<div class="center_container_content">
	<table id="mytable" cellspacing="0" cellpadding="0" style="width:90%;margin-left:10%;">
		<caption></caption>
		<tr><th>权限ID</th><th>上级权限ID</th><th >权限名称</th><th width="4%">权限编号</th><th width="8%">权限层级</th><th width="4%">类型</th><th width="12%">URL</th><th width="15%">操作</th></tr>
		<tbody id="tb" >
		<!-- rootSPermission spermissionList-->
		<tr>
			<td>${rootSPermission.id }</td><td></td><td>${rootSPermission.cname }(${rootSPermission.ename })</td><td>${rootSPermission.id }</td><td>${rootSPermission.pwd }</td>
			<td>
				<c:if test="${rootSPermission.type>0}">
					<c:choose>
				    <c:when test="${rootSPermission.type==1}">
				     	项目
				    </c:when>
				    <c:when test="${rootSPermission.type==2}">
				      	模块
				    </c:when>
				    <c:when test="${rootSPermission.type==3}">
				     	 菜单
				    </c:when>
				    <c:otherwise>
				      	按钮
				    </c:otherwise>  
				   </c:choose>
				</c:if>
			</td>
			<td>${rootSPermission.url }</td>
			<td>
				<input type="submit" class="btn addBtn addChildSPermissionBtn" style="background-color: #10D765;" data-toggle="modal" data-target="#addSPermission"  data-id="${rootSPermission.id }" value="添加子权限">
				
					<input type="submit" class="btn editBtn editSPermissionBtn" value="编辑" data-toggle="modal" data-target="#addSPermission"  data-id="${rootSPermission.id }" >
	
			</td>
		</tr>
		<c:forEach var="sper" items="${spermissionList}" varStatus="status">
			<tr>
				<td>${sper.id }</td><td>${sper.parentId }</td><td>${sper.cname }(${sper.ename })</td><td>${sper.id }</td><td>${sper.pwd }</td>
				<td>
					<c:if test="${sper.type>0}">
						<c:choose>
					    <c:when test="${sper.type==1}">
					     	项目
					    </c:when>
					    <c:when test="${sper.type==2}">
					      	模块
					    </c:when>
					    <c:when test="${sper.type==3}">
					     	 菜单
					    </c:when>
					    <c:otherwise>
					      	按钮
					    </c:otherwise>  
					   </c:choose>
					</c:if>
				</td>
				<td>${sper.url }</td>
				<td>
					<input type="submit" class="btn addBtn addChildSPermissionBtn"  data-toggle="modal" data-target="#addSPermission"  data-id="${sper.id }" style="background-color: #10D765;" value="添加子权限">
					
						<input type="submit" class="btn editBtn editSPermissionBtn" value="编辑"  data-toggle="modal" data-target="#addSPermission"  data-id="${sper.id }">
					<c:if test="${!(sper.haschildren) }">
						<input type="submit" class="btn deleteBtn deleteSPermissionBtn" value="删除" data-id="${sper.id }">
					</c:if>
				</td>
			</tr>								       
		</c:forEach>
		</tbody>
  	</table>
	<div class="clear"></div>

</div>

JS

// JavaScript Document
$(function() {
		initTreeTable();
});
function initTreeTable(){
	$.treetable.defaults={
			id_col:0,//ID td列 {从0开始}
			parent_col:1,//父ID td列
			handle_col:2,//加上操作展开操作的 td列
			open_img:resourceUrl+"/images/minus.gif",
			close_img:resourceUrl+"/images/plus.gif"
		}
		
		//$("#tb").treetable({id_col:0,parent_col:1,handle_col:2,open_img:"images/minus.gif",close_img:"images/plus.gif"});
		
		//只能应用于tbody
		$("#tb").treetable();
		
		//应用样式
		$("#tb tr:even td").addClass("alt");
		$("#tb tr").find("td:eq(2)").addClass("spec");
		$("#tb tr:even").find("td:eq(2)").removeClass().addClass("specalt");
		
		//隐藏数据列
		$("#tb tr").find("td:eq(0)").hide();
		$("#tb tr").find("td:eq(1)").hide();
		$("#mytable tr:eq(0)").find("th:eq(0)").hide();
		$("#mytable tr:eq(0)").find("th:eq(1)").hide();
}
function flushContent(){
	var getLink =ctx +"/spermission/spermission_tree/"+$("#rootId").val();
    $.ajax({
    	url:getLink,
		cache:false, 
		type:'get',
		ifModified :true,
		data : {},
		success : function(q) {
			$(".center_right_content").html('').html(q);
		}
	});
}