java怎么设置树状列表使得其默认为展开

JavaScript021

java怎么设置树状列表使得其默认为展开,第1张

树状列表一般都是动态生成的(java后台实现),所以java只负责发送这些html代码,而页面控制就要交给前端的js来控制

所以要设置列表默认展开,只要把该区域的div设置为非隐藏即可

也可以使用js的一些类库来实现树状列表

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>