树形组件使用教程
<h5>1.表单校验示例相关代码</h5>
<p>css、js引入：</p>
<pre><code class="language-java"><link href="/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
<script src="/js/jquery.min.js?v=2.1.4"></script>
<script type="text/javascript" src="/js/bootstrap.min.js?v=3.3.6"></script>
<!--树形下拉框-->
<link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-treeview/1.2.0/bootstrap-treeview.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-treeview/1.2.0/bootstrap-treeview.min.js"></script></code></pre>
<p>html代码：</p>
<pre><code class="language-java"><div class="row" style="margin-left:0;">
<input id="selectCatalog" name="selectCatalog" type="text" autocomplete="off" class="col-lg-10 col-md-2 form-group" onclick="$('#tree').show()" style="width: 250px;height: 31px;">
<div id="tree" style="display: none; position:absolute; z-index:100; background-color:white; margin-top:-15px; width: 250px"></div>
</div></code></pre>
<p>js代码：</p>
<pre><code class="language-java"><script>
$(function () {
$("#selectCatalog").click(function() {
var options = {
levels : 1,
data : defaultData,
onNodeSelected : function(event, data) {
$("#selectCatalog").val(data.text);
$("#tree").hide();//选中树节点后隐藏树
}
};
$('#tree').treeview(options);
});
});
</script></code></pre>
<h5>2.展现</h5>
<p><img src="https://www.showdoc.cc/server/api/common/visitfile/sign/c302ebe5e2afc6d59e1d3be49dde67ea?showdoc=.jpg" alt="" /></p>
<h5>3.参数说明</h5>
<ul>
<li>.treeview下的参数说明：</li>
</ul>
<table>
<thead>
<tr>
<th>参数名称</th>
<th>参数类型</th>
<th>默认值</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>data</td>
<td>Array of Objects</td>
<td>无</td>
<td>列表树上显示的数据。</td>
</tr>
<tr>
<td>backColor</td>
<td>String</td>
<td>所有合法的颜色值，Default: inherits from Bootstrap.css。</td>
<td>设置所有列表树节点的背景颜色。</td>
</tr>
<tr>
<td>borderColor</td>
<td>String</td>
<td>所有合法的颜色值，Default: inherits from Bootstrap.css。</td>
<td>设置列表树容器的边框颜色，如果不想要边框可以设置showBorder属性为false。</td>
</tr>
<tr>
<td>checkedIcon</td>
<td>String：class名称</td>
<td>Bootstrap Glyphicons定义的 "glyphicon glyphicon-check"</td>
<td>设置处于checked状态的复选框图标。</td>
</tr>
<tr>
<td>collapseIcon</td>
<td>String：class名称</td>
<td>Bootstrap Glyphicons定义的 "glyphicon glyphicon-minus"</td>
<td>设置列表树可收缩节点的图标。</td>
</tr>
<tr>
<td>color</td>
<td>String</td>
<td>所有合法的颜色值，Default: inherits from Bootstrap.css。</td>
<td>设置列表树所有节点的前景色。</td>
</tr>
<tr>
<td>emptyIcon</td>
<td>String：class名称</td>
<td>Bootstrap Glyphicons定义的"glyphicon"。</td>
<td>设置列表树中没有子节点的节点的图标。</td>
</tr>
<tr>
<td>enableLinks</td>
<td>Boolean</td>
<td>false</td>
<td>是否使用当前节点的文本作为超链接。超链接的href值必须在每个节点的data结构中给出。</td>
</tr>
<tr>
<td>expandIcon</td>
<td>String：class名称</td>
<td>Bootstrap Glyphicons定义的 "glyphicon glyphicon-plus"</td>
<td>设置列表树可展开节点的图标。</td>
</tr>
<tr>
<td>highlightSearchResults</td>
<td>Boolean</td>
<td>true</td>
<td>是否高亮搜索结果。</td>
</tr>
<tr>
<td>highlightSelected</td>
<td>Boolean</td>
<td>true</td>
<td>当选择节点时是否高亮显示。</td>
</tr>
<tr>
<td>onhoverColor</td>
<td>String</td>
<td>所有合法的颜色值， Default: '#F5F5F5'。</td>
<td>设置列表树的节点在用户鼠标滑过时的背景颜色。</td>
</tr>
<tr>
<td>levels</td>
<td>Integer</td>
<td>Default: 2</td>
<td>设置继承树默认展开的级别。</td>
</tr>
<tr>
<td>multiSelect</td>
<td>Boolean</td>
<td>false</td>
<td>是否可以同时选择多个节点。</td>
</tr>
<tr>
<td>nodeIcon</td>
<td>String：class名称</td>
<td>Bootstrap Glyphicons定义的 "glyphicon glyphicon-stop"</td>
<td>设置所有列表树节点上的默认图标。</td>
</tr>
<tr>
<td>selectedIcon</td>
<td>String：class名称</td>
<td>Bootstrap Glyphicons定义的 "glyphicon glyphicon-stop"</td>
<td>设置所有被选择的节点上的默认图标。</td>
</tr>
<tr>
<td>searchResultBackColor</td>
<td>String</td>
<td>所有合法的颜色值， Default: undefined, inherits。</td>
<td>设置搜索结果节点的背景颜色。</td>
</tr>
<tr>
<td>searchResultColor</td>
<td>String</td>
<td>所有合法的颜色值， Default: '#D9534F'</td>
<td>设置搜索结果节点的前景颜色。</td>
</tr>
<tr>
<td>selectedBackColor</td>
<td>String</td>
<td>所有合法的颜色值， Default: '#428bca'</td>
<td>设置被选择节点的背景颜色。</td>
</tr>
<tr>
<td>selectedColor</td>
<td>String</td>
<td>所有合法的颜色值， Default: '#FFFFFF'。</td>
<td>设置列表树选择节点的背景颜色。</td>
</tr>
<tr>
<td>showBorder</td>
<td>Boolean</td>
<td>true</td>
<td>是否在节点上显示边框。</td>
</tr>
<tr>
<td>showCheckbox</td>
<td>Boolean</td>
<td>false</td>
<td>是否在节点上显示checkboxes。</td>
</tr>
<tr>
<td>showIcon</td>
<td>Boolean</td>
<td>true</td>
<td>是否显示节点图标。</td>
</tr>
<tr>
<td>showTags</td>
<td>Boolean</td>
<td>false</td>
<td>是否在每个节点右边显示tags标签。tag值必须在每个列表树的data结构中给出。</td>
</tr>
<tr>
<td>uncheckedIcon</td>
<td>String：class名称</td>
<td>Bootstrap Glyphicons定义的 "glyphicon glyphicon-unchecked"</td>
<td>设置图标为未选择状态的checkbox图标。</td>
</tr>
</tbody>
</table>
<h5>4.其他</h5>
<p>3.1、bootstrap-treeview的版本
版本最好使用1.2.0以上的版本，对于一些如复选框等效果可以比较好的兼容</p>