# TreeTable - 树形表格组件

TreeTable 是一个将树形结构和表格功能结合的 jQuery 插件，适合展示带有层级关系的数据表格。

## 与 Treeview 的区别

| 特性 | TreeTable | Treeview |
|------|-----------|----------|
| 数据结构 | `<table>` 表格行 | `<ul><li>` 列表 |
| 功能 | 展开/折叠 + 表格列 | 纯展开/折叠 |
| 适用场景 | 权限表、组织架构表 | 菜单、分类导航 |
| 数据展示 | 多列数据 | 单一名称 |

## 加载方式

```javascript
// 加载 CSS
Wind.css('treeTable');

// 加载 JS
Wind.use('treeTable', function() {
    // treeTable 加载完成，可以使用了
});
```

## 基础用法

### 1. 基础树形表格

```html
<table id="treeTable">
    <thead>
        <tr>
            <th>名称</th>
            <th>描述</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
        <tr id="node-1">
            <td><span class="file">技术部</span></td>
            <td>技术研发部门</td>
            <td><a href="#">编辑</a></td>
        </tr>
        <tr id="node-2" class="child-of-node-1">
            <td><span class="file">前端组</span></td>
            <td>前端开发团队</td>
            <td><a href="#">编辑</a></td>
        </tr>
        <tr id="node-3" class="child-of-node-1">
            <td><span class="file">后端组</span></td>
            <td>后端开发团队</td>
            <td><a href="#">编辑</a></td>
        </tr>
        <tr id="node-4">
            <td><span class="file">市场部</span></td>
            <td>市场推广部门</td>
            <td><a href="#">编辑</a></td>
        </tr>
    </tbody>
</table>
```

```javascript
Wind.use('treeTable', function() {
    $('#treeTable').treeTable();
});
```

### 2. 默认折叠

```javascript
Wind.use('treeTable', function() {
    $('#treeTable').treeTable({
        initialState: 'collapsed'  // 默认折叠所有子节点
    });
});
```

### 3. 默认展开

```javascript
Wind.use('treeTable', function() {
    $('#treeTable').treeTable({
        initialState: 'expanded'  // 默认展开所有节点
    });
});
```

## 高级配置

### 配置选项

```javascript
Wind.use('treeTable', function() {
    $('#treeTable').treeTable({
        // 初始状态: 'collapsed'(折叠) 或 'expanded'(展开)
        initialState: 'expanded',
        
        // 点击节点时切换展开/折叠
        clickableNodeNames: false,
        
        // 展开/折叠时的持续时间（毫秒）
        indent: 19,
        
        // 自定义展开图标
        expandImage: 'images/toggle-expand-dark.png',
        
        // 自定义折叠图标
        collapseImage: 'images/toggle-collapse-dark.png'
    });
});
```

## 方法

```javascript
Wind.use('treeTable', function() {
    var treeTable = $('#treeTable').treeTable();
    
    // 展开节点
    $('#node-1').expand();
    
    // 折叠节点
    $('#node-1').collapse();
    
    // 切换展开/折叠
    $('#node-1').toggleBranch();
    
    // 展开所有节点
    treeTable.expandAll();
    
    // 折叠所有节点
    treeTable.collapseAll();
    
    // 追加子节点
    $('#node-1').appendBranchTo('<tr id="node-5" class="child-of-node-1"><td>新节点</td><td>描述</td><td>操作</td></tr>');
    
    // 移除节点
    $('#node-2').remove();
});
```

## 事件

```javascript
Wind.use('treeTable', function() {
    $('#treeTable').treeTable();
    
    // 节点展开时
    $('#treeTable').on('expanded', function(event, node) {
        console.log('节点展开', node);
    });
    
    // 节点折叠时
    $('#treeTable').on('collapsed', function(event, node) {
        console.log('节点折叠', node);
    });
});
```

## 实际应用场景

### 1. 权限管理表格

```html
<table id="permissionTable">
    <thead>
        <tr>
            <th>权限名称</th>
            <th>权限标识</th>
            <th>类型</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
        <tr id="perm-1">
            <td><span class="file">用户管理</span></td>
            <td>user.manage</td>
            <td>菜单</td>
            <td><a href="#">编辑</a> <a href="#">删除</a></td>
        </tr>
        <tr id="perm-2" class="child-of-perm-1">
            <td><span class="file">查看用户</span></td>
            <td>user.view</td>
            <td>按钮</td>
            <td><a href="#">编辑</a> <a href="#">删除</a></td>
        </tr>
        <tr id="perm-3" class="child-of-perm-1">
            <td><span class="file">编辑用户</span></td>
            <td>user.edit</td>
            <td>按钮</td>
            <td><a href="#">编辑</a> <a href="#">删除</a></td>
        </tr>
    </tbody>
</table>
```

```javascript
Wind.use('treeTable', function() {
    $('#permissionTable').treeTable({
        initialState: 'collapsed'
    });
});
```

### 2. 组织架构表

```html
<table id="orgTable">
    <thead>
        <tr>
            <th>部门名称</th>
            <th>负责人</th>
            <th>人数</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
        <tr id="dept-1">
            <td><span class="file">总公司</span></td>
            <td>张三</td>
            <td>100</td>
            <td><a href="#">编辑</a></td>
        </tr>
        <tr id="dept-2" class="child-of-dept-1">
            <td><span class="file">技术部</span></td>
            <td>李四</td>
            <td>30</td>
            <td><a href="#">编辑</a></td>
        </tr>
        <tr id="dept-3" class="child-of-dept-2">
            <td><span class="file">前端组</span></td>
            <td>王五</td>
            <td>10</td>
            <td><a href="#">编辑</a></td>
        </tr>
    </tbody>
</table>
```

```javascript
Wind.use('treeTable', function() {
    $('#orgTable').treeTable({
        initialState: 'expanded'
    });
});
```

### 3. 分类管理表格

```javascript
// 动态加载数据后初始化
$.get('/category/list', function(data) {
    var html = '<tbody>';
    data.forEach(function(item) {
        var parentClass = item.parent_id ? 'child-of-cat-' + item.parent_id : '';
        html += '<tr id="cat-' + item.id + '" class="' + parentClass + '">';
        html += '<td><span class="file">' + item.name + '</span></td>';
        html += '<td>' + item.description + '</td>';
        html += '<td><a href="#">编辑</a></td>';
        html += '</tr>';
    });
    html += '</tbody>';
    
    $('#categoryTable').html(html);
    
    Wind.use('treeTable', function() {
        $('#categoryTable').treeTable({
            initialState: 'collapsed'
        });
    });
});
```

## HTML 结构说明

### 关键 class 和 id

```html
<tr id="node-1">                          <!-- 父节点: 唯一ID -->
<tr id="node-2" class="child-of-node-1">  <!-- 子节点: child-of-父节点ID -->
```

### 图标

```html
<!-- 文件夹图标（有子节点） -->
<span class="folder">节点名称</span>

<!-- 文件图标（无子节点） -->
<span class="file">节点名称</span>
```

## 样式定制

```css
/* 展开/折叠图标 */
.treeTable .expander {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* 缩进 */
.treeTable tr.child-of-node-1 td:first-child {
    padding-left: 19px;
}

/* 行悬停效果 */
.treeTable tr:hover {
    background-color: #f5f5f5;
}
```

## 浏览器兼容性

- Chrome 所有版本
- Firefox 所有版本
- Safari 所有版本
- Edge 所有版本
- IE 8+

## 注意事项

1. 子行的 `class` 必须使用 `child-of-父行ID` 格式
2. 父行和子行必须在同一个 `<tbody>` 中
3. 初始化前确保表格数据已渲染完成
4. 动态添加行后需要重新初始化或手动展开

## 更多文档

- 官方文档: https://github.com/ludo/jquery-plugins/tree/master/treeTable
