Java 递归菜单Tree并整合bootstrap ace tree
1 bootstrap ace tree Demo 的 json格式为
var tree_data = {
'for-sale' : {name: 'For Sale', type: 'folder'} ,
'vehicles' : {name: 'Vehicles', type: 'folder'} ,
'rentals' : {name: 'Rentals', type: 'folder'} ,
'real-estate' : {name: 'Real Estate', type: 'folder'} ,
'pets' : {name: 'Pets', type: 'folder'} ,
'tickets' : {name: 'Tickets', type: 'item'} ,
'services' : {name: 'Services', type: 'item'} ,
'personals' : {name: 'Personals', type: 'item'}
}
tree_data['for-sale']['additionalParameters'] = {
'children' : {
'appliances' : {name: 'Appliances', type: 'item'},
'arts-crafts' : {name: 'Arts & Crafts', type: 'item'},
'clothing' : {name: 'Clothing', type: 'item'},
'computers' : {name: 'Computers', type: 'item'},
'jewelry' : {name: 'Jewelry', type: 'item'},
'office-business' : {name: 'Office & Business', type: 'item'},
'sports-fitness' : {name: 'Sports & Fitness', type: 'item'}
}
}
2 遍历菜单树拿到与其demo相同的格式:
public class RoleTreeView {
private List<Menu> nodes;
private int i = 0;
String mark = "";
public RoleTreeView(List<Menu> nodes) {
this.nodes = nodes;
}
private StringBuffer html = new StringBuffer();
public String buildTree() {
int memu_num = 0;
for (Menu node : nodes) {
Integer id = node.getId();
if (node.getParentid() == null) {
html.append("\'" + node.getId() + "\' : {name: \'"
+ node.getName() + "\',type:\'folder\',");
build(node, memu_num);
}
memu_num++;
mark = "";
}
return html.toString();
}
private void build(Menu node, int memu_num) {
List<Menu> children = getChildren(node);
if (!children.isEmpty()) {
i++;
for(int j=0;j<i;j++){
mark+="}}},";
}
html.append("additionalParameters:{\'children\':{");
for (Menu child : children) {
html.append("\'"+child.getId() + "':{name:\'" + child.getName() + "\',");
Integer id = child.getId();
List<Menu> children1 = getChildren(child);
if (!children1.isEmpty()) {
html.append("type:\'folder\',");
} else {
html.append("type:\'item\'},");
}
build(child, memu_num);
}
html.append("}}},");
}else{
i=0;
}
}
private List<Menu> getChildren(Menu node) {
List<Menu> children = new ArrayList<Menu>();
Integer id = node.getId();
for (Menu child : nodes) {
if (id.equals(child.getParentid())) {
children.add(child);
}
}
return children;
}
}
3 在jsp页面上执行
jQuery(function($) {
var tree_datamenu = { ${menudata}}; //红色字体为处理后传入的string
var tree = new DataSourceTree({data: tree_datamenu});
$('#tree1')
.ace_tree(
{
dataSource : tree,
multiSelect : true,
loadingHTML : '<div class="tree-loading"><i class="icon-refresh icon-spin blue"></i></div>',
'open-icon' : 'icon-minus',
'close-icon' : 'icon-plus',
'selectable' : true,
'selected-icon' : 'icon-ok',
'unselected-icon' : 'icon-remove'
});
4 效果展示
var tree_data = {
'for-sale' : {name: 'For Sale', type: 'folder'} ,
'vehicles' : {name: 'Vehicles', type: 'folder'} ,
'rentals' : {name: 'Rentals', type: 'folder'} ,
'real-estate' : {name: 'Real Estate', type: 'folder'} ,
'pets' : {name: 'Pets', type: 'folder'} ,
'tickets' : {name: 'Tickets', type: 'item'} ,
'services' : {name: 'Services', type: 'item'} ,
'personals' : {name: 'Personals', type: 'item'}
}
tree_data['for-sale']['additionalParameters'] = {
'children' : {
'appliances' : {name: 'Appliances', type: 'item'},
'arts-crafts' : {name: 'Arts & Crafts', type: 'item'},
'clothing' : {name: 'Clothing', type: 'item'},
'computers' : {name: 'Computers', type: 'item'},
'jewelry' : {name: 'Jewelry', type: 'item'},
'office-business' : {name: 'Office & Business', type: 'item'},
'sports-fitness' : {name: 'Sports & Fitness', type: 'item'}
}
}
2 遍历菜单树拿到与其demo相同的格式:
public class RoleTreeView {
private List<Menu> nodes;
private int i = 0;
String mark = "";
public RoleTreeView(List<Menu> nodes) {
this.nodes = nodes;
}
private StringBuffer html = new StringBuffer();
public String buildTree() {
int memu_num = 0;
for (Menu node : nodes) {
Integer id = node.getId();
if (node.getParentid() == null) {
html.append("\'" + node.getId() + "\' : {name: \'"
+ node.getName() + "\',type:\'folder\',");
build(node, memu_num);
}
memu_num++;
mark = "";
}
return html.toString();
}
private void build(Menu node, int memu_num) {
List<Menu> children = getChildren(node);
if (!children.isEmpty()) {
i++;
for(int j=0;j<i;j++){
mark+="}}},";
}
html.append("additionalParameters:{\'children\':{");
for (Menu child : children) {
html.append("\'"+child.getId() + "':{name:\'" + child.getName() + "\',");
Integer id = child.getId();
List<Menu> children1 = getChildren(child);
if (!children1.isEmpty()) {
html.append("type:\'folder\',");
} else {
html.append("type:\'item\'},");
}
build(child, memu_num);
}
html.append("}}},");
}else{
i=0;
}
}
private List<Menu> getChildren(Menu node) {
List<Menu> children = new ArrayList<Menu>();
Integer id = node.getId();
for (Menu child : nodes) {
if (id.equals(child.getParentid())) {
children.add(child);
}
}
return children;
}
}
3 在jsp页面上执行
jQuery(function($) {
var tree_datamenu = { ${menudata}}; //红色字体为处理后传入的string
var tree = new DataSourceTree({data: tree_datamenu});
$('#tree1')
.ace_tree(
{
dataSource : tree,
multiSelect : true,
loadingHTML : '<div class="tree-loading"><i class="icon-refresh icon-spin blue"></i></div>',
'open-icon' : 'icon-minus',
'close-icon' : 'icon-plus',
'selectable' : true,
'selected-icon' : 'icon-ok',
'unselected-icon' : 'icon-remove'
});
4 效果展示