jquery树形表格treetable插件怎么用

发布网友发布时间：2022-04-24 19:02

共2个回答

热心网友时间：2022-05-07 04:22

jquery树形表格treetable插件使用方法步骤：
第一步：

1.上官网下载。
2.插件引用，当下载的时候，会有很多个文件，但是根据api来看，如果只想做简单的效果，js除了引用juquery外，只需要引用jquery.treetable.js插件，如果想让它有默认的外观样式还需要引入它们的jquery.treetable.css和jquery.treetable.theme.default.css
第二步：建立table格式
<table id="example-advanced">
<tr data-tt-id="1">
<td>大家电</td>
</tr>
<tr data-tt-id="2" data-tt-parent-id="1">
<td>---电视</td>
</tr>
<tr data-tt-id="3" data-tt-parent-id="1">
<td>---洗衣机</td>
</tr>
<tr data-tt-id="4" data-tt-parent-id="1">
<td>---冰箱</td>
</tr>
</table>

第三步：引入JS

/* 初始化数据 */
$("#example-advanced").treetable({ expandable: true });/* 高亮显示 */$("#example-advanced tbody").on("mousedown", "tr", function() {

$(".selected").not(this).removeClass("selected");

$(this).toggleClass("selected");

});/* 点击展开&&关闭 */<a href="#" class="btn btn-blue" onclick="jQuery('#example-advanced').treetable('expandAll'); return false;">展开</a>

<a href="#" class="btn btn-blue" onclick="jQuery('#example-advanced').treetable('collapseAll'); return false;">关闭l</a>