bootstrap-treeview 2.1.0版本使用

bootstrap-treeview是一个很实用的插件，目前网上很多1.2.0版本的中文翻译，但是最新版本已经是2.1.0了，增加了不少方法和属性，找了很没有中文的，只有自己来了。

下载路径：https://github.com/patternfly/patternfly-bootstrap-treeview

插件依赖：Bootstrap版本 3.3.0 以 上， jQuery版本 1.9.0 以上

数据结构：

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: "Node 1"
}

更多自定义设置：

{
text: "Node 1",
icon: "glyphicon glyphicon-stop",
image: "something.png",
selectedIcon: "glyphicon glyphicon-stop",
color: "#000000",
backColor: "#FFFFFF",
selectable: true,
checkable: true,
state: {
checked: true,
disabled: true,
expanded: true,
selected: true
},
tags: ['available'],
dataAttr: {
target: '#tree'
}
id: 'something',
class: 'special extraordinary',
hideCheckbox: true,
nodes: [
{},
...
]
}

节点属性：可用于树节点的属性定义，如节点的文本、颜色和标签等。

参数名称	参数类型	参数描述
text	String(必选项)	列表树节点上的文本，通常是节点右边的小图标
tooltip	String(可选项)	当鼠标移动到节点上显示的文本
icon	String(可选项)	列表树节点上的图标，通常是节点左边的小图标
image	String(可选项)	列表树节点上的图标，可覆盖icon，可以用bootstrap提供的图标，也可以是一个图片路径。
selectedIcon	String(可选项)	当某个节点被选择后显示的图标，通常是节点左边的图标
color	String(可选项)	节点的前景色，覆盖全局的前景色选项
backClolor	String(可选项)	节点的背景色，覆盖全局的背景色选项
lazyload	Boolean，默认false	是否调用lazyLoad()。设置为true，给该节点添加一个展开图标，即使该节点没有子节点，第一次点击时调用 lazyLoad()，该function可自定义
selectable	Boolean，默认true	指定列表树的节点是否可选择。设置为false将使节点展开，并且不能被选择
checkable	Boolean，默认true	树节点是否可checkbox多选，配合showCheckbox使用
state	Object(可选项)	一个节点的初始状态
state.checked	Boolean，默认false	一个节点是否处于checked状态，用一个checkbox标识
state.disabled	Boolean，默认false	一个节点是否处于不可选状态
state.expaned	Boolean，默认false	一个节点是否处于展开状态
state.selected	Boolean，默认false	一个节点是否处于选中状态
tags	Array of Strings(可选项)	通过结合全局showTags选项来在列表树节点的右边添加额外的信息。
dataAttr	Array of Strings(可选项)	每个节点增加 data- 的附加html属性列表
class	String(可选项)	自定义css样式列表，多个样式以空格分开
ID	String(可选项)	自定义html的id属性
hideCheckbox	Boolean，默认false	用于设置showCheckbox参数时隐藏给定节点的复选框

全局参数：参数可以定制treeview的默认外观和行为。参数使用一个对象来在插件初始化时传入：

参数名称	参数类型	默认值	描述
data	Array of Object	无	树的数据源，指定数据或dataUrl返回值
dataUrl	Ajax请求	无	同一般Ajax请求，只能接受json返回值
backColor	String	继承自bootstrap.css	设置所有节点的背景色
borderColor	String	继承自bootstrap.css	设置控件的边框颜色，如果不想要边框，可将showBorder设置成false
changedNodeColor	String	blue	设置当复选框状态改变时，节点的文本颜色
checkboxFirst	Boolean	false	与showCheckbox结合使用，替换复选框图标
checkedIcon	String	glyphicon glyphicon-check	与showCheckbox结合使用，当复选框处于checked状态时的图标
collapseIcon	String	glyphicon glyphicon-minus	设置列表数可收缩节点的图标
color	String	继承自bootstrap.css	设置树的所有节点的前景色
emptyIcon	String	glyphicon	设置树中没有子节点的节点图标
expandIcon	String	glyphicon glyphicon-plus	设置列表树可展开节点的图标
loadingIcon	String	glyphicon glyphicon-hourglass	设置节点运行lazyload()时的节点图标
hierarchicalCheck	Boolean	false	设置是否启用分层，checked/unchecked复选框
propagateCheckEven	Boolean	false	与hierarchicalCheck结合使用，是否将nodeChecked和nodeUnchecked事件扩大到父/子节点
highlightChanges	Boolean	false	结合showCheckedbox使用，改变checkbox状态时是否高亮
highlightSearchResults	Boolean	true	是否高亮搜索结果
lazyload	Function	undefined	第一次展开可延迟加载的节点时调用此函数，该节点是函数的第一个参数，第二个参数是负责加载数据的函数，该函数的json格式需要和上面定义的格式相同
levels	Integer	2	树默认展开级别
mulitSelect	Boolean	false	是否可以同时选择多个节点
nodeIcon	String	glyphicon glyphicon-stop	所有树节点的默认图标
onhoverColor	String	#F5F5F5	当鼠标移动到节点上时的背景颜色
partiallyCheckedIcon	String	glyphicon glyphicon-expand	与showCheckbox和hierarchicalCheck结合使用，设置节点部分选中时的图标
preventUnselect	Boolean	false	是否可以在另一个节点未选择时，选择该节点
allowReselect	Boolean	false	与preventUnselect结合使用，是否可以重新选择已经选中的节点
selectedIcon	String	glyphicon glyphicon-stop	设置所有被选择的节点上的图标
searchResuleBackColor	String	undefined，inherits	设置搜索结果节点的背景色
searchResultColor	String	#D9534F	设置搜索结果节点的前景色
selectedBackColor	String	#428bca	设置被选择节点的背景色
selectedColor	String	#FFFFFF	设置被选择节点的前景色
showBorder	Boolean	true	是否在节点上显示边框
showCheckbox	Boolean	false	是否在节点上显示checkboxes
showIcon	Boolean	true	是否显示节点图标
showImage	Boolean	false	是否树节点上的图标，可覆盖icon
showTags	Boolean	false	是否在每个节点右边显示tags标签。tag值必须在每个列表树的data结构中给出
tagsClass	String	badge	设置tags的样式
uncheckedIcon	String	glyphicon glyphicon-unchecked	设置图标为未选择状态的checkbox图标
wrapNodeText	Boolean	false	是否使用<span class='text'></span>标签来环绕节点的文本。

可用方法：

你可以通过两种方式来调用方法：

1、插件包装器：插件的包装器可以作为访问底层方法的代理。

$('#tree').treeview('methodName', args)

2、直接使用treeview：你可以通过下面两种方法中的一种来获取treeview对象实例。

//该方法返回一个treeview的对象实例
$('#tree').treeview(true)
.methodName(args);

//对象实例也保存在DOM元素的data中，
//可以使用'treeview'的id来访问它。
$('#tree').data('treeview')
.methodName(args);

方法列表：

所有方法的声明参数中的nodes既可以接受一个节点也可以接受一个节点数组

addNode(nodes,parentNode,index,options)：添加节点

$('#tree').treeview('addNode', [ nodes, parentNode, index, { silent: true } ]);

如果parentNode的值为空，该节点（节点数组）添加到根节点下

如果index的值为空，该节点追加到子节点列表的最后

触发 nodeRendered 事件，传入silent来阻止触发事件。

addNodeAfter(nodes,node,options)：在指定节点的后面添加节点

$('#tree').treeview('addNodeAfter', [ nodes, node, { silent: true } ]);

如果node的值为空，该节点（节点数组）会从根节点的开头(prepended)开始插入

触发 nodeRendered 事件，传入silent来阻止触发事件。

addNodeBefore(nodes,node,options)：在指定节点的前面添加节点

$('#tree').treeview('addNodeAfter', [ nodes, node, { silent: true } ]);

如果node的值为空，该节点（节点数组）会从根节点的最后(appended)开始插入

触发 nodeRendered 事件，传入silent来阻止触发事件。

checkAll(options)：选择所有节点

$('#tree').treeview('checkAll', { silent: true });

触发 nodeChecked事件，传入silent来阻止触发事件。

checkNode(nodes,options)：选择指定节点，接受节点或节点数组

$('#tree').treeview('checkNode', [ nodes, { silent: true } ]);

触发 nodeChecked事件，传入silent来阻止触发事件。

clearSearch()：清除以前的搜索结果，比如清除他们的高亮状态

$('#tree').treeview('clearSearch');

触发 searchCleared事件。

collapseAll(options)：折叠整个树

$('#tree').treeview('clearSearch');

触发 nodeCollapsed事件，传入silent来阻止触发事件。

collapseNode(nodes,options)：折叠指定节点和他的子节点，如果不想折叠子节点可以设置{ignoreChildren:true}

$('#tree').treeview('collapseNode', [ nodes, { silent: true, ignoreChildren: false } ]);

触发 nodeCollapsed事件，传入silent来阻止触发事件。

disableAll(options)：禁用所有节点

$('#tree').treeview('disableAll', { silent: true, keepState: true });

触发nodeDisabled事件，传入silent来阻止触发事件，传入keepState来保持节点的expanded/checked/selected 状态。

disableNode(nodes,options)：禁用指定节点

$('#tree').treeview('disableNode', [ nodes, { silent: true, keepState: true } ]);

触发nodeDisabled事件，传入silent来阻止触发事件，传入keepState来保持节点的expanded/checked/selected 状态。

enableAll(options)：启用所有节点

$('#tree').treeview('enableAll', { silent: true });

触发nodeEnabled事件，传入silent来阻止触发事件。

enableNode(nodes,options)：启用指定节点，接受节点或节点数组

$('#tree').treeview('enableNode', [ nodes, { silent: true } ]);

触发nodeEnabled事件，传入silent来阻止触发事件。

expandAll(options)：展开所有节点，也可以展开任何给定级别的节点

$('#tree').treeview('expandAll', { levels: 2, silent: true });

触发nodeExpanded事件，传入silent来阻止触发事件。

expandNode(nodes,options)：展开指定节点，接受节点或节点数组，也可以展开任何给定级别的节点

$('#tree').treeview('expandNode', [ nodes, { levels: 2, silent: true } ]);

触发nodeExpanded事件，传入silent来阻止触发事件。

findNodes(pattern,field)：查询符合条件的节点，返回结果是一个节点数组

$('#tree').treeview('findNodes', ['Parent', 'text']);

pattern参数可以是正则表达式，如果使用正则匹配，要使用开始和结束字符串 ^pattern$

getChecked()：返回被选中的节点数组，state.checked = true

$('#tree').treeview('getChecked');

getCollapsed()：返回被折叠的节点的数组，state.expanded = false

$('#tree').treeview('getCollapsed');

Disabled()：返回被禁用的节点数组，state.disabled = true

$('#tree').treeview('getDisabled');

getEnabled()：返回可用的节点数组，state.disabled = false

$('#tree').treeview('getEnabled');

getExpanded()：返回所有展开节点的数组，state.expanded = true

$('#tree').treeview('getExpanded');

getNodes()：返回给定节点的节点数组

$('#tree').treeview('getNodes', nodes);

getParents(nodes)：返回给定节点的父节点，没有父节点返回undefined

$('#tree').treeview('getParent', nodes);

getSelected()：返回被选中的节点数组，state.selected = true

$('#tree').treeview('getSelected');

getSiblings(Nodes)：返回给定节点的兄弟节点数组，没有返回undefined

$('#tree').treeview('getSiblings', nodes);

getUnchecked()：返回没有被选中的节点数组，state.checked = false

$('#tree').treeview('getUnchecked');

getUnselected()：返回没有被选择的节点数组，state.selected = false

$('#tree').treeview('getUnselected');

remove()：删除列表树容器，移除附加的事件，附加对象和额外的html元素

$('#tree').treeview('remove');

removeNode()：删除给定的节点，接受节点或节点数组

$('#tree').treeview('removeNode', [ nodes, { silent: true } ]);

revealNode(nodes,options)：显示树节点，展开从这个节点开始到根节点的所有节点

$('#tree').treeview('revealNode', [ nodes, { silent: true } ]);

触发nodeExpanded事件，传入silent来阻止触发事件。

search(pattern,options)：查询指定字符串的节点，并且高亮节点。返回复核的节点数组

$('#tree').treeview('search', [ 'Parent', {
ignoreCase: true,     // case insensitive
exactMatch: false,    // like or equals
revealResults: true,  // reveal matching nodes
}]);

触发searchComplete事件。

selectNode(nodes,options)：选中指定的节点数组

$('#tree').treeview('selectNode', [ nodes, { silent: true } ]);

触发nodeSelected事件，传入silent来阻止触发事件。

toggleNodeChecked(nodes,options)：切换节点的检查状态

$('#tree').treeview('toggleNodeChecked', [ nodes, { silent: true } ]);

触发nodeChecked 或 nodeUnchecked 事件，传入silent来阻止触发事件。

toggleNodeDisabled(nodes,options)：切换节点的禁用状态

$('#tree').treeview('toggleNodeDisabled', [ nodes, { silent: true } ]);

触发nodeDisabled 或 nodeEnabled 事件，传入silent来阻止触发事件。

toggleNodeexpanded(nodes,options)：切换节点的扩展状态

$('#tree').treeview('toggleNodeExpanded', [ nodes, { silent: true } ]);

触发nodeExpanded 或 nodeCollapsed 事件，传入silent来阻止触发事件。

toggleNodeSelected(nodes,options)：切换节点的选中状态

$('#tree').treeview('toggleNodeSelected', [ nodes, { silent: true } ]);

触发nodeSelected 或 nodeUnselected 事件，传入silent来阻止触发事件。

uncheckedAll(options)

uncheckedNode(nodes,options)

updateNode(nodes,newNode,option)

unmarkCheckboxChanges()

unselectNode(nodes,option)

事件：可以在参数中使用回调函数来绑定任何事件，或者使用标准的jQuery.on方法来绑定事件。

在参数中调用的示例：

$('#tree').treeview({
// The naming convention for callback's is to prepend with `on`
// and capitalize the first letter of the event name
// e.g. nodeSelected -> onNodeSelected
onNodeSelected: function(event, data) {
// 事件代码...
});

使用jQuery.on方法：

$('#tree').on('nodeSelected', function(event, data) {
// 事件代码...
});

事件列表：

生命周期事件 : 在整个tree对象的生命周期中一般只执行一次

loading(event) - 树数据正在加载时触发

loadingFailed(event,error) - 树数据加载错误触发(ajax 错误)

initialized(event,nodes) - 树数据加载完成准备解析前触发

nodeRendered(event,node) - 一个新节点被解析完成后触发

rendered(event,nodes) - 树对象解析完成后触发

destroyed(event) - 树对象被销毁后触发

状态事件 : 在节点的状态改变是触发的事件

nodeChecked(event,node) - 一个节点被checked。

nodeCollapsed(event,node) - 一个节点被折叠。

nodeDisabled(event,node) - 一个节点被禁用。

nodeEnabled(event,node) - 一个节点被启用。

nodeExpanded(event,node) - 一个节点被展开。

nodeSelected(event,node) - 一个节点被选择。

nodeUnchecked(event,node) - 一个节点被unchecked。

nodeUnselected(event,node) - 取消选择一个节点。

其他事件

searchComplete(event,results) - 搜索结束后触发。

searchCleared(event,results) - 搜索结果清除后触发。