权限录入 html树,权限树 bootstrap-treeview中文API 以及后台JSON数据处理

简要教程

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);

}

}