树形菜单,包括树形表格,是如何实现的?方法如下:
1.在这之前你需要了解一项技术插件,JQuery的TreeTable。你需要下载JQuery的TreeTable的jar包。主要用到的是jquery.treetable.js。还有一个css——jquery.treetable.css,可以根据自己的需求来决定是否需要加载。当然你还需要JQuery的包,最好不要那种压缩版的。
2.准备数据。数据的存放必须是有规则的。中国——省份——市,按照这种一层层的来存放数据。推荐方法:
public class Tree {
private List<SystemModule> newTree = new ArrayList<SystemModule>();
private List<SystemModule> list;
public Tree(List<SystemModule> list) {
System.out.println("开始初始化参数");
if (list != null) {
for (SystemModule a : list) {
System.out.println("name是:" + a.getName());
}
}
this.list = list;
}
public List<SystemModule> buildTree() {
System.out.println("准备第一层");
for (SystemModule node : list) {
System.out.println("name的名字是:" + node.getName());
/* if (StringUtils.isBlank(node.getPid())) */
if ("null".equals(node.getPid())) {
System.out.println("第一层:" + node.getName());
newTree.add(node);
System.out.println("准备找孩子");
build(node);
}
}
return newTree;
}
private void build(SystemModule module) {
List<SystemModule> listChild = child(module);
if (!(listChild.isEmpty())) {
for (SystemModule list2 : listChild) {
System.out.println("孩子开始添加");
newTree.add(list2);
System.out.println("孩子是否还有孩子");
child(list2);
}
}
}
private List<SystemModule> child(SystemModule child) {
List<SystemModule> Child = new ArrayList<SystemModule>();
for (SystemModule children : list) {
if (child.getId().equals(children.getPid())) {
System.out.println("孩子是:" + children.getName());
Child.add(children);
}
}
return Child;
}
}
把这个类实例化然后调用buildTree方法,返回的数据就是有规则的了。
3.把数据返回到前台页面。写一个js:
/* 树形菜单 */
$("#tree").treetable({
expandable : true
});
tree这个id是我table用的,完全可以按照情况来重新定义。
4.忘了写一个table。然后第一层的tr格式如下<tr data-tt-id="">第二层的格式如下:<tr data-tt-id="" data-tt-parent-id="">。
启动项目,看看效果怎样!
看看这个,也可以帮你理解:
https://blog.csdn.net/mushu1025/article/details/78608922
https://blog.csdn.net/laonayonghaifeisi/article/details/51926349