简要教程
bootstrap-treeview是一款效果非常酷的基于bootstrap的jQuery多级列表树插件。该jQuery插件基于Twitter Bootstrap，以简单和优雅的方式来显示一些继承树结构，如视图树、列表树等等。
插件依赖Bootstrap v3.0.3
jQuery v2.0.3
以上两个外部依赖文件已经经过测试可以正常使用，其他版本的Bootstrap需要另行测试。该插件不支持bootstrap 2。
使用方法
首先要在页面中引入依赖文件和 bootstrap-treeview.js文件。
HTML结构
可以使用任何HTML DOM元素来作为该列表树的容器：
节点属性
下面的参数可用于树节点的属性定义，如节点的文本、颜色和标签等。
参数名称参数类型参数描述textString(必选项)列表树节点上的文本，通常是节点右边的小图标。
iconString(可选项)列表树节点上的图标，通常是节点左边的图标。
selectedIconString(可选项)当某个节点被选择后显示的图标，通常是节点左边的图标。
hrefString(可选项)结合全局enableLinks选项为列表树节点指定URL。
selectableBoolean. Default: true指定列表树的节点是否可选择。设置为false将使节点展开，并且不能被选择。
stateObject(可选项)一个节点的初始状态。
state.checkedBoolean，默认值false指示一个节点是否处于checked状态，用一个checkbox图标表示。
state.disabledBoolean，默认值false指示一个节点是否处于disabled状态。(不是selectable，expandable或checkable)
state.expandedBoolean，默认值false指示一个节点是否处于展开状态。
state.selectedBoolean，默认值false指示一个节点是否可以被选择。
colorString. Optional节点的前景色，覆盖全局的前景色选项。
backColorString. Optional节点的背景色，覆盖全局的背景色选项。
tagsArray of Strings. Optional通过结合全局showTags选项来在列表树节点的右边添加额外的信息。
全局参数
参数可以定制treeview的默认外观和行为。参数使用一个对象来在插件初始化时传入：
参数名称参数类型默认值描述dataArray of Objects无列表树上显示的数据。
backColorString所有合法的颜色值，Default: inherits from Bootstrap.css。设置所有列表树节点的背景颜色。
borderColorString所有合法的颜色值，Default: inherits from Bootstrap.css。设置列表树容器的边框颜色，如果不想要边框可以设置showBorder属性为false。
checkedIconString：class名称Bootstrap Glyphicons定义的 "glyphicon glyphicon-check"设置处于checked状态的复选框图标。
collapseIconString：class名称Bootstrap Glyphicons定义的 "glyphicon glyphicon-minus"设置列表树可收缩节点的图标。
colorString所有合法的颜色值，Default: inherits from Bootstrap.css。设置列表树所有节点的前景色。
emptyIconString：class名称设置列表树中没有子节点的节点的图标。
enableLinksBooleanfalse是否使用当前节点的文本作为超链接。超链接的href值必须在每个节点的data结构中给出。
expandIconString：class名称Bootstrap Glyphicons定义的 "glyphicon glyphicon-plus"设置列表树可展开节点的图标。
highlightSearchResultsBooleantrue是否高亮搜索结果。
highlightSelectedBooleantrue当选择节点时是否高亮显示。
onhoverColorString所有合法的颜色值， Default: '#F5F5F5'。设置列表树的节点在用户鼠标滑过时的背景颜色。
levelsIntegerDefault: 2设置继承树默认展开的级别。
multiSelectBooleanfalse是否可以同时选择多个节点。
nodeIconString：class名称Bootstrap Glyphicons定义的 "glyphicon glyphicon-stop"设置所有列表树节点上的默认图标。
selectedIconString：class名称Bootstrap Glyphicons定义的 "glyphicon glyphicon-stop"设置所有被选择的节点上的默认图标。
searchResultBackColorString所有合法的颜色值， Default: undefined, inherits。设置搜索结果节点的背景颜色。
searchResultColorString所有合法的颜色值， Default: '#D9534F'设置搜索结果节点的前景颜色。
selectedBackColorString所有合法的颜色值， Default: '#428bca'设置被选择节点的背景颜色。
selectedColorString所有合法的颜色值， Default: '#FFFFFF'。设置列表树选择节点的背景颜色。
showBorderBooleantrue是否在节点上显示边框。
showCheckboxBooleanfalse是否在节点上显示checkboxes。
showIconBooleantrue是否显示节点图标。
showTagsBooleanfalse是否在每个节点右边显示tags标签。tag值必须在每个列表树的data结构中给出。
uncheckedIconString：class名称Bootstrap Glyphicons定义的 "glyphicon glyphicon-unchecked"设置图标为未选择状态的checkbox图标。
$(function() {
var $checkableTree = $('#treeview-checkable')
.treeview({
data: getTvStateData(), //数据
showIcon: false,
showCheckbox: true,
levels: 1,
onNodeChecked: function(event, node) { //选中节点
var selectNodes = getChildNodeIdArr(node); //获取所有子节点
if (selectNodes) { //子节点不为空，则选中所有子节点
$('#treeview-checkable').treeview('checkNode', [selectNodes, { silent: true }]);
}
var parentNode = $("#treeview-checkable").treeview("getNode", node.parentId);
setParentNodeCheck(node);
},
onNodeUnchecked: function(event, node) { //取消选中节点
var selectNodes = getChildNodeIdArr(node); //获取所有子节点
if (selectNodes) { //子节点不为空，则取消选中所有子节点
$('#treeview-checkable').treeview('uncheckNode', [selectNodes, { silent: true }]);
}
},
onNodeExpanded:
function(event, data) {
if (data.nodes === undefined || data.nodes === null) {
} else if (data.tags[0] === "2") {
alert("Tags 2");
} else {
alert("1111");
}
}
});
});
function getChildNodeIdArr(node) {
var ts = [];
if (node.nodes) {
for (x in node.nodes) {
ts.push(node.nodes[x].nodeId);
if (node.nodes[x].nodes) {
var getNodeDieDai = getChildNodeIdArr(node.nodes[x]);
for (j in getNodeDieDai) {
ts.push(getNodeDieDai[j]);
}
}
}
} else {
ts.push(node.nodeId);
}
return ts;
}
function setParentNodeCheck(node) {
var parentNode = $("#treeview-checkable").treeview("getNode", node.parentId);
if (parentNode.nodes) {
var checkedCount = 0;
for (x in parentNode.nodes) {
if (parentNode.nodes[x].state.checked) {
checkedCount ++;
} else {
break;
}
}
if (checkedCount === parentNode.nodes.length) {
$("#treeview-checkable").treeview("checkNode", parentNode.nodeId);
setParentNodeCheck(parentNode);
}
}
}
JavaUtils-递归解析多级菜单(数据树)
/**
* 树形数据实体接口
* @param
* @author jianda
* @date 2017年5月26日
*/
public interface TreeEntity {
public String getId();
public String getParentId();
public void setChildList(List childList);
}
/**
* 解析树形数据工具类
*
* @author jianda
* @date 2017年5月29日
*/
public class TreeParser{
/**
* 解析树形数据
* @param topId
* @param entityList
* @return
* @author jianda
* @date 2017年5月29日
*/
public static > List getTreeList(String topId, List entityList) {
List resultList=new ArrayList<>();
//获取顶层元素集合
String parentId;
for (E entity : entityList) {
parentId=entity.getParentId();
if(parentId==null||topId.equals(parentId)){
resultList.add(entity);
}
}
//获取每个顶层元素的子数据集合
for (E entity : resultList) {
entity.setChildList(getSubList(entity.getId(),entityList));
}
return resultList;
}
/**
* 获取子数据集合
* @param id
* @param entityList
* @return
* @author jianda
* @date 2017年5月29日
*/
private static > List getSubList(String id, List entityList) {
List childList=new ArrayList<>();
String parentId;
//子集的直接子对象
for (E entity : entityList) {
parentId=entity.getParentId();
if(id.equals(parentId)){
childList.add(entity);
}
}
//子集的间接子对象
for (E entity : childList) {
entity.setChildList(getSubList(entity.getId(), entityList));
}
//递归退出条件
if(childList.size()==0){
return null;
}
return childList;
}
}
public class Menu implements TreeEntity
public String id;
public String name;
public String parentId;
public List
//set、get方法...
public class Test {
public static void main(String[] args) {
List
Menu menu1=new Menu();
menu1.setId("1");
menu1.setParentId("0");
menu1.setName("菜单1");
list.add(menu1);
Menu menu2=new Menu();
menu2.setId("2");
menu2.setParentId("0");
menu2.setName("菜单2");
list.add(menu2);
Menu menu3=new Menu();
menu3.setId("3");
menu3.setParentId("1");
menu3.setName("菜单11");
list.add(menu3);
Menu menu4=new Menu();
menu4.setId("4");
menu4.setParentId("3");
menu4.setName("菜单111");
list.add(menu4);
List
System.out.println(menus);
}
}
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
