bootstrap-treeview参数

可以使用任何HTML DOM元素来作为该列表树的容器：

< div  id = "mytree" >div>

节点属性

参数名称	参数类型	参数描述
text	String(必选项)	列表树节点上的文本，通常是节点右边的小图标。
icon	String(可选项)	列表树节点上的图标，通常是节点左边的图标。
selectedIcon	String(可选项)	当某个节点被选择后显示的图标，通常是节点左边的图标。
href	String(可选项)	结合全局enableLinks选项为列表树节点指定URL。
selectable	Boolean. Default: true	指定列表树的节点是否可选择。设置为false将使节点展开，并且不能被选择。
state	Object(可选项)	一个节点的初始状态。
state.checked	Boolean，默认值false	指示一个节点是否处于checked状态，用一个checkbox图标表示。
state.disabled	Boolean，默认值false	指示一个节点是否处于disabled状态。（不是selectable，expandable或checkable）
state.expanded	Boolean，默认值false	指示一个节点是否处于展开状态。
state.selected	Boolean，默认值false	指示一个节点是否可以被选择。
color	String. Optional	节点的前景色，覆盖全局的前景色选项。
backColor	String. Optional	节点的背景色，覆盖全局的背景色选项。
tags	Array of Strings. Optional	通过结合全局showTags选项来在列表树节点的右边添加额外的信息。

全局参数

参数名称	参数类型	默认值	描述
data	Array of Objects	无	列表树上显示的数据。
backColor	String	所有合法的颜色值，Default: inherits from Bootstrap.css。	设置所有列表树节点的背景颜色。
borderColor	String	所有合法的颜色值，Default: inherits from Bootstrap.css。	设置列表树容器的边框颜色，如果不想要边框可以设置showBorder属性为false。
checkedIcon	String：class名称	Bootstrap Glyphicons定义的 "glyphicon glyphicon-check"	设置处于checked状态的复选框图标。
collapseIcon	String：class名称	Bootstrap Glyphicons定义的 "glyphicon glyphicon-minus"	设置列表树可收缩节点的图标。
color	String	所有合法的颜色值，Default: inherits from Bootstrap.css。	设置列表树所有节点的前景色。
emptyIcon	String：class名称	Bootstrap Glyphicons定义的"glyphicon"。	设置列表树中没有子节点的节点的图标。
enableLinks	Boolean	false	是否使用当前节点的文本作为超链接。超链接的href值必须在每个节点的data结构中给出。
expandIcon	String：class名称	Bootstrap Glyphicons定义的 "glyphicon glyphicon-plus"	设置列表树可展开节点的图标。
highlightSearchResults	Boolean	true	是否高亮搜索结果。
highlightSelected	Boolean	true	当选择节点时是否高亮显示。
onhoverColor	String	所有合法的颜色值， Default: '#F5F5F5'。	设置列表树的节点在用户鼠标滑过时的背景颜色。
levels	Integer	Default: 2	设置继承树默认展开的级别。
multiSelect	Boolean	false	是否可以同时选择多个节点。
nodeIcon	String：class名称	Bootstrap Glyphicons定义的 "glyphicon glyphicon-stop"	设置所有列表树节点上的默认图标。
selectedIcon	String：class名称	Bootstrap Glyphicons定义的 "glyphicon glyphicon-stop"	设置所有被选择的节点上的默认图标。
searchResultBackColor	String	所有合法的颜色值， Default: undefined, inherits。	设置搜索结果节点的背景颜色。
searchResultColor	String	所有合法的颜色值， Default: '#D9534F'	设置搜索结果节点的前景颜色。
selectedBackColor	String	所有合法的颜色值， Default: '#428bca'	设置被选择节点的背景颜色。
selectedColor	String	所有合法的颜色值， Default: '#FFFFFF'。	设置列表树选择节点的背景颜色。
showBorder	Boolean	true	是否在节点上显示边框。
showCheckbox	Boolean	false	是否在节点上显示checkboxes。
showIcon	Boolean	true	是否显示节点图标。
showTags	Boolean	false	是否在每个节点右边显示tags标签。tag值必须在每个列表树的data结构中给出。
uncheckedIcon	String：class名称	Bootstrap Glyphicons定义的 "glyphicon glyphicon-unchecked"	设置图标为未选择状态的checkbox图标。

用法

$('#mytree').treeview({
            data: InitTree(), //节点数据
            backColor: "#333744",
            borderColor: "#333744",
            color: "#ffffff",
            checkedIcon: "glyphicon glyphicon-check",
            collapseIcon: "glyphicon glyphicon-minus",
            showTags:true
        });

    function InitTree() {
        //节点上的数据遵循如下的格式：
        var tree = [{
            text: "Node 1", //节点显示的文本值  string
            // icon: "glyphicon glyphicon-play-circle", //节点上显示的图标，支持bootstrap的图标  string
            //selectedIcon: "glyphicon glyphicon-ok", //节点被选中时显示的图标       string
            //color: "#ff0000", //节点的前景色      string
            // backColor: "#333744", //节点的背景色      string
            borderColor: "#333744",
            //href: "#http://www.baidu.com", //节点上的超链接
            selectable: true, //标记节点是否可以选择。false表示节点应该作为扩展标题，不会触发选择事件。  string
            state: { //描述节点的初始状态    Object
                checked: true, //是否选中节点
                /*disabled: true,*/ //是否禁用节点
                expanded: true, //是否展开节点
                selected: true //是否选中节点
            },
            tags: ['1'], //向节点的右侧添加附加信息（类似与boostrap的徽章）    Array of Strings
            nodes: [{
                text: "Child 1",
                nodes: [{
                    text: "Grandchild 1"
                }, {
                    text: "Grandchild 2"
                }]
            }, {
                text: "Child 2"
            }]
        },
        {
            text: "Parent 2",
            nodes: [{
                text: "Child 2",
                nodes: [{
                    text: "Grandchild 3"
                }, {
                    text: "Grandchild 4"
                }]
            }, {
                text: "Child 2"
            }]
        }, {
            text: "Parent 3"
        }, {
            text: "Parent 4"
        }, {
            text: "Parent 5"
        }];
        return tree;
    }