树形菜单的实现

树形菜单,包括树形表格,是如何实现的?方法如下:

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

猜你喜欢

转载自blog.csdn.net/qq_39904068/article/details/81409553
今日推荐