树形菜单的实现

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

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值