bootstrap的treeview使⽤⽅法教程
简要教程
bootstrap-treeview是⼀款效果⾮常酷的基于bootstrap的多级列表树插件。该插件基于Twitter Bootstrap，以简单和优雅的⽅式来显⽰⼀些继承树结构，如视图树、列表树等等。
插件依赖
Bootstrap v3.0.3
jQuery v2.0.3
以上两个外部依赖⽂件已经经过可以正常使⽤，其他版本的Bootstrap需要另⾏测试。该插件不⽀持boot
strap 2。
使⽤⽅法
⾸先要在页⾯中引⼊依赖⽂件和 bootstrap-treeview.js⽂件。
<!-- Required Stylesheets -->
< link href = "./css/bootstrap.css"rel = "stylesheet" >
<!-- Required Javascript -->
< script src = "./js/jquery.js" ></ script >
< script src = "./js/bootstrap-treeview.js" ></ script >
HTML结构
可以使⽤任何HTML DOM元素来作为该列表树的容器：
< div id = "tree" ></ div >
调⽤插件
该列表树插件最基本的调⽤⽅法如下：
function  getTree() {
// Some logic to retrieve, or generate tree structure
return  data;
}
$( '#tree' ).treeview({data: getTree()});
数据结构
为了创建树的继承结构，需要为该列表树插件提供⼀个嵌套结构的js对象。例如：
var  tree = [
{
text: "Parent 1" ,
nodes: [
{
text: "Child 1" ,
nodes: [
{
text: "Grandchild 1"
},
{
text: "Grandchild 2"
}
]
},
{
text: "Child 2"
}
]
},
{
text: "Parent 2"
},
{
text: "Parent 3"
},
{
text: "Parent 4"
},
{
text: "Parent 5"
}
];
最简单的树结构可以只有⼀个节点，使⽤⼀个带text属性的js对象来实现即可：
{
text: "Node 1"
}
如果你需要⾃定义更多的内容，可以参考下⾯：
节点属性
下⾯的参数可⽤于树节点的属性定义，如节点的⽂本、颜⾊和标签等。
参数名称参数类型参数描述
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）panded Boolean，默认值false指⽰⼀个节点是否处于展开状态。
state.selected Boolean，默认值false指⽰⼀个节点是否可以被选择。
color String. Optional节点的前景⾊，覆盖全局的前景⾊选项。
backColor String. Optional节点的背景⾊，覆盖全局的背景⾊选项。
tags Array of Strings. Optional通过结合全局showTags选项来在列表树节点的右边添加额外的信息。
全局参数
参数可以定制treeview的默认外观和⾏为。参数使⽤⼀个对象来在插件初始化时传⼊：
参数名称参数类型默认值描述
data Array of
Objects
⽆列表树上显⽰的数据。
{
text: "Node 1" ,
icon: "glyphicon glyphicon-stop" ,
selectedIcon: "glyphicon glyphicon-stop" ,  color: "#000000" ,
backColor: "#FFFFFF" ,
href: "#node-1" ,
selectable: true ,
state: {
checked: true ,
disabled: true ,
expanded: true ,
selected: true
},
tags: [ 'available' ],
nodes: [
{},
...
]
.......//可以扩展属性
}
/jquery在线教程交流
/ Example: initializing the treeview
// expanded to 5 levels
// with a background color of green $( '#tree' ).treeview({
data: data,          // data is not optional
levels: 5,
backColor: 'green'
});
backColor String ，Default: inherits from
Bootstrap.css。
设置所有列表树节点的背景颜⾊。
borderColor String ，Default: inherits from
Bootstrap.css。
设置列表树容器的边框颜⾊，如果不想要边框可以设置showBorder属性为
false。
checkedIcon String：class
名称
定义的 "glyphicon glyphicon-
check"
设置处于checked状态的复选框图标。
collapseIcon String：class
名称
定义的 "glyphicon glyphicon-
minus"
设置列表树可收缩节点的图标。
color String ，Default: inherits from
Bootstrap.css。
设置列表树所有节点的前景⾊。
emptyIcon String：class
名称
定义的"glyphicon"。设置列表树中没有⼦节点的节点的图标。
enableLinks Boolean false 是否使⽤当前节点的⽂本作为超链接。超链接的href值必须在每个节点的data 结构中给出。
expandIcon String：class
名称
定义的 "glyphicon glyphicon-plus"设置列表树可展开节点的图标。
highlightSearchResults Boolean true是否⾼亮搜索结果。
highlightSelected Boolean true当选择节点时是否⾼亮显⽰。
onhoverColor String， Default: '#F5F5F5'。设置列表树的节点在⽤户⿏标滑过时的背景颜⾊。levels Integer Default: 2设置继承树默认展开的级别。
multiSelect Boolean false是否可以同时选择多个节点。
nodeIcon String：class
名称
定义的 "glyphicon glyphicon-stop"设置所有列表树节点上的默认图标。
selectedIcon String：class
名称
定义的 "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
名称
定义的 "glyphicon glyphicon-
unchecked"
设置图标为未选择状态的checkbox图标。
参数名称参数类型默认值描述
可⽤⽅法
你可以通过两种⽅式来调⽤⽅法：
1、插件包装器：插件的包装器可以作为访问底层⽅法的代理。
多个参数必须使⽤数组对象来传⼊。
2、直接使⽤treeview：你可以通过下⾯两种⽅法中的⼀种来获取treeview对象实例。
$( '#tree' ).treeview( 'methodName' , args)
//该⽅法返回⼀个treeview的对象实例
$( '#tree' ).treeview( true )
.methodName(args);
//对象实例也保存在DOM元素的data中，
//可以使⽤'treeview'的id来访问它。
$( '#tree' ).data( 'treeview' )
.methodName(args);
treeview⽅法列表
checkAll(options)：选择所有的节点。
$( '#tree' ).treeview( 'checkAll' , { silent:  true  });
触发nodeChecked事件，传⼊silent来阻⽌其它事件。
checkNode(node | nodeId, options)：选择指定的节点，接收节点或节点ID。
$( '#tree' ).treeview( 'checkNode' , [ nodeId, { silent:  true  } ]);
触发nodeChecked事件，传⼊silent来阻⽌其它事件。
clearSearch()：清空以前的搜索结果。例如清除它们的⾼亮状态。
$( '#tree' ).treeview( 'clearSearch' );
触发searchCleared事件。
collapseAll(options)：折叠所有的节点，折叠整个树。
$( '#tree' ).treeview( 'collapseAll' , { silent:  true  });
触发nodeCollapsed事件，传⼊silent来阻⽌其它事件。
collapseNode(node | nodeId, options)：折叠指定节点和它的⼦节点。如果不想折叠⼦节点，可以设置{ ignoreChildren: true }。
$( '#tree' ).treeview( 'collapseNode' , [ nodeId, { silent:  true , ignoreChildren:  false  } ]);
触发nodeCollapsed事件，传⼊silent来阻⽌其它事件。
disableAll(options)：禁⽤所有的节点。
$( '#tree' ).treeview( 'disableAll' , { silent:  true  });
触发nodeDisabled事件，传⼊silent来阻⽌其它事件。
disableNode(node | nodeId, options)：禁⽤指定的节点，接收节点或节点ID。
$( '#tree' ).treeview( 'disableNode' , [ nodeId, { silent:  true  } ]);
触发nodeDisabled事件，传⼊silent来阻⽌其它事件。
enableAll(options)：启⽤所有的节点。
$( '#tree' ).treeview( 'enableAll' , { silent:  true  });
触发nodeEnabled事件，传⼊silent来阻⽌其它事件。
enableNode(node | nodeId, options)：启⽤指定的节点，接收节点或节点ID。
$( '#tree' ).treeview( 'enableNode' , [ nodeId, { silent:  true  } ]);
触发nodeEnabled事件，传⼊silent来阻⽌其它事件。
expandAll(options)：展开所有的树节点。也可以展开任何给定级别的树节点。
$( '#tree' ).treeview( 'expandAll' , { levels: 2, silent:  true  });
触发nodeExpanded事件，传⼊silent来阻⽌其它事件。
expandNode(node | nodeId, options)：展开指定的树节点，接收节点或节点ID。也可以展开任何给定级别的树节点。
$( '#tree' ).treeview( 'expandNode' , [ nodeId, { levels: 2, silent:  true  } ]);
触发nodeExpanded事件，传⼊silent来阻⽌其它事件。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。