我在MVC中使用javascrip进行树视图： 脚本： -
$(document).ready(function() {
$('.tree > ul').attr('role', 'tree').find('ul').attr('role', 'group');
$('.tree').find('li:has(ul)').addClass('parent_li').attr('role', 'treeitem').find(' > span').attr('title', 'Collapse this branch').on('click', function (e) {
var children = $(this).parent('li.parent_li').find(' > ul > li');
if (children.is(':visible')) {
children.hide('fast');
$(this).attr('title', 'Expand this branch').find(' > i').addClass('icon-plus-sign').removeClass('icon-minus-sign');
}
else {
children.show('fast');
$(this).attr('title', 'Collapse this branch').find(' > i').addClass('icon-minus-sign').removeClass('icon-plus-sign');
}
e.stopPropagation();
});
});
MVC中的Html代码：
<div class="container-fluid" style="">
<div class="row-fluid">
<section role="main" class="span12">
<div class="tree well">
<ul>
<li>
<span id="item-2" class="">
<i class="icon-plus-sign getChild" id="parentClick-2"></i>
<img src="/Content/img/man.png" class="img-thumbnail img-family" alt="Cinque Terre" style="width:130px;height:130px">
<h6 class="family-h2-name">
Dhiren Patel<br />
dhin@123.com<br />
9974745511 <br />
<a href="/FamilyTree/Add/2" id="btnAdd" class="btn-u btn-u-orange btnAdd btnHref" type="button" data-toggle="tooltip" data-placement="bottom" title="Add" >
<i class="fa fa-plus" id="btnAdd"></i>
</a>
<a href="/FamilyTree/Add/2" id='btnEdit' class='btn-u btn-u-orange btnHref' type='button' data-toggle='tooltip' data-placement='bottom' title='Edit'>
<i class='fa fa-pencil' id='btnEdit'></i>
</a>
<a id='btnDelete-2' class='btn-u btn-u-orange btnHref btnDelete' data-toggle='tooltip' data-placement='bottom' title='Delete'>
<i class='fa fa-trash-o' id='btnDelete'></i>
</a>
</h6>
</span>
<ul id="child-2"></ul>
<span id="item-4" class="">
<i class="icon-plus-sign getChild" id="parentClick-4"></i>
<img src="/Content/img/man.png" class="img-thumbnail img-family" alt="Cinque Terre" style="width:130px;height:130px">
<h6 class="family-h2-name">
akshay mistry<br />
akshay@mistri.com<br />
9977886655 <br />
<a href="/FamilyTree/Add/4" id="btnAdd" class="btn-u btn-u-orange btnAdd btnHref" type="button" data-toggle="tooltip" data-placement="bottom" title="Add" >
<i class="fa fa-plus" id="btnAdd"></i>
</a>
<a href="/FamilyTree/Add/4" id='btnEdit' class='btn-u btn-u-orange btnHref' type='button' data-toggle='tooltip' data-placement='bottom' title='Edit'>
<i class='fa fa-pencil' id='btnEdit'></i>
</a>
<a id='btnDelete-4' class='btn-u btn-u-orange btnHref btnDelete' data-toggle='tooltip' data-placement='bottom' title='Delete'>
<i class='fa fa-trash-o' id='btnDelete'></i>
</a>
</h6>
</span>
<ul id="child-4"></ul>
<span id="item-13" class="">
<i class="icon-plus-sign getChild" id="parentClick-13"></i>
<img src="/Content/img/FamilyTree/china-red-seamless-background-pattern.jpg" class="img-thumbnail img-family" alt="Cinque Terre" style="width:130px;height:130px">
<h6 class="family-h2-name">
daks patel<br />
dkpatel@123.com<br />
7867564534 <br />
<a href="/FamilyTree/Add/13" id="btnAdd" class="btn-u btn-u-orange btnAdd btnHref" type="button" data-toggle="tooltip" data-placement="bottom" title="Add" >
<i class="fa fa-plus" id="btnAdd"></i>
</a>
<a href="/FamilyTree/Add/13" id='btnEdit' class='btn-u btn-u-orange btnHref' type='button' data-toggle='tooltip' data-placement='bottom' title='Edit'>
<i class='fa fa-pencil' id='btnEdit'></i>
</a>
<a id='btnDelete-13' class='btn-u btn-u-orange btnHref btnDelete' data-toggle='tooltip' data-placement='bottom' title='Delete'>
<i class='fa fa-trash-o' id='btnDelete'></i>
</a>
</h6>
</span>
<ul id="child-13"></ul>
</li>
</ul>
</div>
</section>
</div>
</div>
问题是： - 我想折叠ROOT节点的所有子节点：级别2,3,4,5 ...（根是1级节点）想要树视图星。如何折叠和展开特定的选定根。