ZTree 树

ZTree

zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点

页面引用

<link href="https://cdn.bootcss.com/zTree.v3/3.5.33/css/metroStyle/metroStyle.css" rel="stylesheet"></head>

<script src="https://cdn.bootcss.com/zTree.v3/3.5.33/js/jquery.ztree.core.js" type="text/javascript"></script>

存入内容的div

<ul id="tree" class="ztree"></ul>

ZTree抽取代码

var ZTree=function () {
    /**
     *
     * @param url 请求地址url
     * @param callback 回调函数
     * @param nowId  每次访问请求地址携带的参数----目前是当前对象的id(可不用)
     */
    var initZTree=function (url,callback,nowId) {
        var setting = {
            async: {
                enable: true,
                url:url,
                //第一次以后请求提交的属性 name别名为n(第一次请求不携带参数)
                autoParam:["id", "name=n", "level=lv"],
                otherParam:{"nowId":nowId}
            },
            //回调 (可多个回调函数 具体使用时参考文档 如下为点击树事件后的回调)
            callback: {
                //点击事件后 获取值并赋值
                onClick: callback
            }
        };
        $(document).ready(function(){
            $.fn.zTree.init($("#tree"), setting);
        });
    };
    return{
        init:function (url,callback,nowId) {
            initZTree(url,callback,nowId);
        }
    }
}();

Example(函数为点击事件)

ZTree.init("/item/cat/tree",function onClick(event, treeId, treeNode, clickFlag) {
        //treeNode为点击的对象
        $("#cname").val(treeNode.name);
        $("#cid").val(treeNode.id);
});

Controller(请求处理)Example

/**  ZTree树形展示动态获取数据方法
     *  通过id当做parentId来获取它的子节点集合
     * @param id
     * @return
     */
    @ResponseBody
    @PostMapping(value = "/tree")
    public List<T> tree(String id,String nowId){
        List<T> list= Lists.newArrayList();
        //第一次加载树形的时候 id没传 F12---NetWork---Headers 看Form Data可知
        if (StringUtils.isBlank(id)){
            list = service.getByParentId(0L);
        }
        //第一次以后
        else{
            list = service.getByParentId(Long.parseLong(id));
        }
        //把自己不显示 删除自己
        if(StringUtils.isNoneBlank(nowId)){
            list.remove(service.getById(Long.parseLong(nowId)));
        }
        //注意(坑) 返回的json数据对is开头的boolean属性会自动去掉is 需要注解这个属性再映射一个相同属性名的值
        return list;
    }