世界上最好用的基于 Angular 和 Angular Material 的树形表格组件

Demo

看到很多基于 angular material 的 table-tree 组件，都需要在 JS 文件中定义表格的列属性，麻烦不说，而且 HTML 属性定义在 JS 中，始终不方便维护，代码也很丑陋。

ngTableTree 定义了一个 tableTree 指令，在指令内部使用 $compile 重新编译需要显示的 HTML 模板文件，所以我们可以直接在 HTML 中定义模板。

比如：

<table table-tree="tree" init-expand="true" expand-indent="10">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Address</th>
      <th>Contact</th>
    </tr>
  </thead>
  <tbody>
    <tr tt-template>
      <td tt-expand>{{ **.name }}</td>
      <td>{{ **.age }}</td>
      <td>{{ **.address }}</td>
      <td>
        {{ **.contact }}
        <ng-md-icon icon="info" style="fill: #ccc; vertical-align: middle;" size="16">
          <md-tooltip>please contact me with {{ **.contact }}</md-tooltip>
        </ng-md-icon>
      </td>
    </tr>
  </tbody>
</table>

然后在 controller 中定义：

$scope.tree = [{
  name: 'frank',
  age: 34,
  address: 'Kezhu Road 192',
  contact: '13600010001',
  children: [{
    name: 'frank a',
    age: 34,
    address: 'Kezhu Road 192',
    contact: '13600010002'
  }, {
    name: 'frank b',
    age: 34,
    address: 'Kezhu Road 192',
    contact: '13600010003',
    children: [{
      name: 'frank ba',
      age: 34,
      address: 'Kezhu Road 192',
      contact: '13600010004'
    }, {
      name: 'frank bb',
      age: 34,
      address: 'Kezhu Road 192',
      contact: '13600010005'
    }, {
      name: 'frank bc',
      age: 34,
      address: 'Kezhu Road 192',
      contact: '13600010006'
    }]
  }, {
    name: 'frank c',
    age: 34,
    address: 'Kezhu Road 192',
    contact: '13600010003'
  }]
}, {
  name: 'frank d',
  age: 34,
  address: 'Kezhu Road 192',
  contact: '13600010007'
}];

安装

bower install --save ngTableTree

使用

如上述例子，在需要使用 table tree 的地方加入 table-tree 指令，并且关联要绑定的数据。

参数说明：

• table-tree：关联要绑定的数据
• init-expand：初始化时的默认展开说明，默认展开(true). 也可以设置为数字, 表示默认展开的层数, 第一层是 1 ,第二层是 2, 以此类推
• expand-indent：层级缩进，默认为 10px
• deep-watch：是否深度监控数据集的改变，默认 true
• max-rows：默认每次加载的最大行数. 比如共有 1000 行数据, 可以设置 max-rows = 100, 即每次加载 100 行数据, 点击底部的 Load more... 或者 Load all... 可以继续加载数据

注意：

• 绑定的数据下一级数据使用 children 属性指定。

• 如果要指定行数据模板，请在定义 tr 时加入 tt-template 属性，否则以第一个 tr 行为模板

  <tbody>
    <tr tt-template>...</tr>
  </tbody>
  

  其中的行属性字段使用 {{ ** }} 指代，比如行数据的 name 字段表示为 {{ **.name }}

• 如果要指定哪个单元格控制展开收起动作，请使用 tt-expand 属性，否则以行数据模板的第一个 td 为默认控制行展开收起的单元格：

  <td tt-expand>{{ **.name }}</td>