treegrid html
时间: 2023-07-05 19:31:18 浏览: 95
EASYUI TREEGRID
使用treegrid插件创建树状表格的HTML代码如下:
```html
<table id="myTable" class="treegrid">
<thead>
<tr>
<th>ID</th>
<th>名称</th>
<th>价格</th>
</tr>
</thead>
<tbody>
<tr id="1" class="treegrid-1">
<td>1</td>
<td>节点1</td>
<td>100</td>
</tr>
<tr id="2" class="treegrid-2 treegrid-parent-1">
<td>2</td>
<td>节点1.1</td>
<td>50</td>
</tr>
<tr id="3" class="treegrid-3 treegrid-parent-1">
<td>3</td>
<td>节点1.2</td>
<td>50</td>
</tr>
<tr id="4" class="treegrid-4 treegrid-parent-2">
<td>4</td>
<td>节点1.1.1</td>
<td>30</td>
</tr>
<tr id="5" class="treegrid-5 treegrid-parent-2">
<td>5</td>
<td>节点1.1.2</td>
<td>20</td>
</tr>
<tr id="6" class="treegrid-6 treegrid-parent-3">
<td>6</td>
<td>节点1.2.1</td>
<td>25</td>
</tr>
<tr id="7" class="treegrid-7 treegrid-parent-3">
<td>7</td>
<td>节点1.2.2</td>
<td>25</td>
</tr>
</tbody>
</table>
```
其中,表格的id和class属性分别为"myTable"和"treegrid",每行数据作为一个节点,通过id和父节点id的对应关系来构建树状结构。每个节点的class属性中包含了"treegrid-节点id"和"treegrid-parent-父节点id"两个类,用于标识节点和父节点的关系。
使用以上HTML代码以及treegrid插件的相关配置,就可以创建一个基本的树状表格。
阅读全文