第一步:
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>
首先说树形结构,国内有个开源的js控件叫zTree,支持复选。然后下拉框你可能需要自己做一个(html输入框+右边的一个图标按钮)。
最后,用一个隐藏的div把树形结构包起来,这个div设置成绝对定位,在下拉框右侧选择按钮的单击事件处理函数里,显示这个隐藏的div,并把它的位置设置成在下拉框下面就行了。
思路就是这样,要么楼主可以找找有没有其他更现成的控件,extjs4我记得有类似的,但是他的复选功能不太符合中国习惯,也许现在的版本改好了,你可以查查试试看。
一、JQuery树形控件Jquery树形控件是一款基于JQuery+bootstrap、完全通过js和样式手写出来的非常轻量级的控件,网上很多地方都能看到它的影子。它功能简单、用户体验不错。对于一些简单的层级关系展示比较实用,但对于节点的增删改实现起来就不容易了,如果非要做,可能需要自己去封装。
1、一睹初容
全部收起
展开一级
全部展开
2、代码示例
此控件实现起来也非常简单,只需要引用jQuery和bootstrap组件即可。
<link href="~/Content/Tree1/css/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/Tree1/css/style.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function(){
$('.tree li:has(ul)').addClass('parent_li').find(' >span').attr('title', 'Collapse this branch')
$('.tree li.parent_li >span').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()
})
})
</script>
<div class="tree well">
<ul>
<li>
<span><i class="icon-folder-open"></i>顶级节点1</span><a href="">Goes somewhere</a>
<ul>
<li>
<span><i class="icon-minus-sign"></i>一级节点1</span><a href=""></a>
<ul>
<li>
<span><i class="icon-leaf"></i>二级节点1_1</span><a href=""></a>
</li>
</ul>
</li>
<li>
<span><i class="icon-minus-sign"></i>一级节点2</span><a href=""></a>
<ul>
<li>
<span><i class="icon-leaf"></i>二级节点2_1</span><a href=""></a>
</li>
<li>
<span><i class="icon-minus-sign"></i>二级节点2_2</span><a href=""></a>
<ul>
<li>
<span><i class="icon-minus-sign"></i>三级节点2_1</span><a href=""></a>
<ul>
<li>
<span><i class="icon-leaf"></i>四级节点2_1</span><a href=""></a>
</li>
<li>
<span><i class="icon-leaf"></i>四级节点2_2</span><a href=""></a>
</li>
</ul>
</li>
<li>
<span><i class="icon-leaf"></i>三级节点2_2</span><a href=""></a>
</li>
<li>
<span><i class="icon-leaf"></i>三级节点2_3</span><a href=""></a>
</li>
</ul>
</li>
<li>
<span><i class="icon-leaf"></i>二级节点2_3</span><a href=""></a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<span><i class="icon-folder-open"></i>顶级节点2</span><a href=""></a>
<ul>
<li>
<span><i class="icon-leaf"></i>一级节点2_1</span><a href=""></a>
</li>
</ul>
</li>
</ul>
</div>
这些代码都是直接从网上down下来的,节点上面的图标可以通过样式修改,图标样式也是基于bootstrap的。如果需要动态添加节点,可以自己封装组件去拼html,实现起来应该也比较简单。由以上可知此组件的轻量级,如果你需要对节点作增删改或者选择等操作,不要急,下面的控件可能比较适用。
二、文件树编辑插件Treed
这个组件是从网上找到的,最初演示,组内成员一致觉得效果很赞。因为它通过树形展示,方便的提供了节点的增删改。节点的伸缩效果也比较好。好了来看看。