配置参数
- theme: string {主题，有两个选项：default、vsStyle. 默认:default}
- expandLevel: int {树表的展开层次. 默认:1}
- column: int {可控制列的序号. 默认:0，即第一列}
- onSelect: function {拥有controller自定义属性的元素的点击事件，return false则中止展开. 默认值:
function($treeTable, id) { //$treeTable 当前树表的jquery对象. //id 当前行的id //返回false，则直接退出，不会激发后面的beforeExpand和子节点的展开 return true; } - beforeExpand: {展开子节点前触发的事件, 默认值：
function($treeTable, id) { //$treeTable 当前树表的jquery对象. //id 当前行的id }
属性说明
- id: string 行的id
- pId: string 父行的id
- controller: bool 指定某一个元素是否可以控制行的展开
- hasChild: bool 指定某一个tr元素是否有孩子（动态加载需用到）
- isFirstOne: bool 指定某一个tr元素是否是第一个孩子（自动生成属性，只读）
- isLastOne: bool 指定某一个tr元素是否是最后一个孩子（自动生成属性，只读）
- prevId: string 前一个兄弟节点的id（自动生成属性，只读）
- depth: string 当前行的深度（自动生成属性，只读）
TreeTable的应用实例：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TreeTable</title>
<link href="acl/treetable/stylesheets/jquery.treeTable.css"
rel="stylesheet" type="text/css" />
<link href="acl/treetable/stylesheets/master.css" rel="stylesheet"
type="text/css" />
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript"
src="acl/treetable/javascripts/jquery.treeTable.min.js"></script>
<script language="javascript">
$(function() {
//class="example"
$(".example").treeTable({
initialState : "expanded"
});
//
$("#example3").treeTable({
initialState : "expanded"
});
//id="dnd-example"
$("#dnd-example").treeTable({
initialState : "expanded"
});
});
</script>
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
font-size: 12px;
}
-->
</style>
</head>
<body>
<table class="example">
<caption>Example 1: A complex tree.</caption>
<tr id="ex2-node-1">
<td>Node 1</td>
</tr>
<tr id="ex2-node-1-1" class="child-of-ex2-node-1">
<td>Node 1.1</td>
</tr>
<tr id="ex2-node-1-2" class="child-of-ex2-node-1">
<td>Node 1.2</td>
</tr>
<tr id="ex2-node-1-3" class="child-of-ex2-node-1">
<td>Node 1.3</td>
</tr>
<tr id="ex2-node-2">
<td>Node 2</td>
</tr>
<tr id="ex2-node-2-1" class="child-of-ex2-node-2">
<td>Node 2.1</td>
</tr>
<tr id="ex2-node-2-1-1" class="child-of-ex2-node-2-1">
<td>Node 2.1.1</td>
</tr>
<tr id="ex2-node-2-2" class="child-of-ex2-node-2">
<td>Node 2.2</td>
</tr>
</table>
<table id="example3">
<caption>Example 2: A tree that is not collapsable.</caption>
<thead>
<tr>
<th>Tree column</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr id="ex3-node-1">
<td>Node 1</td>
<td>Second column</td>
</tr>
<tr id="ex3-node-1-1" class="child-of-ex3-node-1">
<td>Node 1.1</td>
<td>Second column</td>
</tr>
<tr id="ex3-node-1-2" class="child-of-ex3-node-1">
<td>Node 1.2</td>
<td>Second column</td>
</tr>
<tr id="ex3-node-1-3" class="child-of-ex3-node-1">
<td>Node 1.3</td>
<td>Second column</td>
</tr>
<tr id="ex3-node-2">
<td>Node 2</td>
<td>Second column</td>
</tr>
<tr id="ex3-node-2-1" class="child-of-ex3-node-2">
<td>Node 2.1</td>
<td>Second column</td>
</tr>
</tbody>
</table>
<table class="example" id="dnd-example">
<caption>Example 3: Dragging and dropping example.</caption>
<thead>
<tr>
<th>Title</th>
<th>Size</th>
<th>Kind</th>
</tr>
</thead>
<tbody>
<tr id="node-20">
<td><span class="file">CHANGELOG</span>
</td>
<td>4 KB</td>
<td>Plain text</td>
</tr>
<tr id="node-1">
<td><span class="folder">doc</span>
</td>
<td>--</td>
<td>Folder</td>
</tr>
<tr id="node-2" class="child-of-node-1">
<td><span class="folder">images</span>
</td>
<td>--</td>
<td>Folder</td>
</tr>
</tbody>
</table>
</body>
</html>
扫一扫
474
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
