java中生成tree,显示在页面上

红太狼 2022-09-30 15:55 161阅读 0赞

一、需要引入的资源
    
    <script src="${basePath}/js/fuelux/js/tree.min.js"></script>
    <script src="${basePath}/js/tree-init.js"></script>
    1.tree.min
       /*
     * Fuel UX Spinner
     * https://github.com/ExactTarget/fuelux
     * Copyright (c) 2012 ExactTarget
     * Licensed under the MIT license.
     */
    
    !function(t){var e=function(e,i){this.$element=t(e),this.options=t.extend({},t.fn.tree.defaults,i),this.$element.on("click",".tree-item",t.proxy(function(t){this.selectItem(t.currentTarget)},this)),this.$element.on("click",".tree-folder-header",t.proxy(function(t){this.selectFolder(t.currentTarget)},this)),this.render()};e.prototype={constructor:e,render:function(){this.populate(this.$element)},populate:function(e){var i=this,n=e.parent(),r=n.find(".tree-loader:eq(0)");r.show(),this.options.dataSource.data(e.data(),function(o){r.hide(),t.each(o.data,function(r,o){var s;"folder"===o.type?(s=i.$element.find(".tree-folder:eq(0)").clone().show(),s.find(".tree-folder-name").html(o.name),s.find(".tree-loader").html(i.options.loadingHTML),s.find(".tree-folder-header").data(o)):"item"===o.type&&(s=i.$element.find(".tree-item:eq(0)").clone().show(),s.find(".tree-item-name").html(o.name),s.data(o));var a=o.dataAttributes||[];t.each(a,function(t,e){switch(t){case"class":case"classes":case"className":s.addClass(e);break;default:s.attr(t,e)}}),e.hasClass("tree-folder-header")?n.find(".tree-folder-content:eq(0)").append(s):e.append(s)}),i.$element.trigger("loaded",n)})},selectItem:function(e){var i=t(e),n=this.$element.find(".tree-selected"),r=[];if(this.options.multiSelect?t.each(n,function(e,n){var o=t(n);o[0]!==i[0]&&r.push(t(n).data())}):n[0]!==i[0]&&(n.removeClass("tree-selected").find("i").removeClass("fa fa-check").addClass("tree-dot"),r.push(i.data())),this.options.selectable){var o="selected";i.hasClass("tree-selected")?(o="unselected",i.removeClass("tree-selected"),i.find("i").removeClass("fa fa-check").addClass("tree-dot")):(i.addClass("tree-selected"),i.find("i").removeClass("tree-dot").addClass("fa fa-check"),this.options.multiSelect&&r.push(i.data()))}r.length&&this.$element.trigger("selected",{info:r}),i.trigger("updated",{info:r,item:i,eventType:o})},selectFolder:function(e){var i,n,r,o=t(e),s=o.parent(),a=s.find(".tree-folder-content"),l=a.eq(0);o.find(".fa.fa-folder").length?(i="opened",n=".fa.fa-folder",r="fa fa-folder-open",l.show(),a.children().length||this.populate(o)):(i="closed",n=".fa.fa-folder-open",r="fa fa-folder",l.hide(),this.options.cacheItems||l.empty()),s.find(n).eq(0).removeClass("fa fa-folder fa-folder-open").addClass(r),this.$element.trigger(i,o.data())},selectedItems:function(){var e=this.$element.find(".tree-selected"),i=[];return t.each(e,function(e,n){i.push(t(n).data())}),i},collapse:function(){var e=this.options.cacheItems;this.$element.find(".fa.fa-folder-open").each(function(){var i=t(this).removeClass("fa fa-folder fa-folder-open").addClass("fa fa-folder"),n=i.parent().parent(),r=n.children(".tree-folder-content");r.hide(),e||r.empty()})}},t.fn.tree=function(i,n){var r,o=this.each(function(){var o=t(this),s=o.data("tree"),a="object"==typeof i&&i;s||o.data("tree",s=new e(this,a)),"string"==typeof i&&(r=s[i](n))});return void 0===r?o:r},t.fn.tree.defaults={selectable:!0,multiSelect:!1,loadingHTML:"<div>Loading...</div>",cacheItems:!0},t.fn.tree.Constructor=e}(window.jQuery);
    2、tree-init.js
      var TreeView = function () {
    
        return {
            //main function to initiate the module
            init: function () {
    
                var DataSourceTree = function (options) {
                    this._data  = options.data;
                    this._delay = options.delay;
                };
    
                DataSourceTree.prototype = {
    
                    data: function (options, callback) {
                        var self = this;
    
                        setTimeout(function () {
                            var data = $.extend(true, [], self._data);
    
                            callback({ data: data });
    
                        }, this._delay)
                    }
                };
    
                // INITIALIZING TREE
                var treeDataSource = new DataSourceTree({
                    data: [
                        { name: 'Dashboard', type: 'folder', additionalParameters: { id: 'F1' } },
                        { name: 'Elements', type: 'folder', additionalParameters: { id: 'F2' } },
                        { name: 'View Category', type: 'item', additionalParameters: { id: 'I1' } },
                        { name: 'Testing', type: 'item', additionalParameters: { id: 'I2' } }
                    ],
                    delay: 400
                });
    
                var treeDataSource2 = new DataSourceTree({
                    data: [
                        { name: 'Test tree 1 <div class="tree-actions"></div>', type: 'folder', additionalParameters: { id: 'F11' } },
                        { name: 'Test tree 2 <div class="tree-actions"></div>', type: 'folder', additionalParameters: { id: 'F12' } },
                        { name: '<i class="fa fa-bell-o"></i> Notification', type: 'item', additionalParameters: { id: 'I11' } },
                        { name: '<i class="fa fa-bar-chart-o"></i> Assignment', type: 'item', additionalParameters: { id: 'I12' } }
                    ],
                    delay: 400
                });
    
                var treeDataSource3 = new DataSourceTree({
                    data: [
                        { name: 'Dashboard <div class="tree-actions"></div>', type: 'folder', additionalParameters: { id: 'F11' } },
                        { name: 'View Category <div class="tree-actions"></div>', type: 'folder', additionalParameters: { id: 'F12' } },
                        { name: 'AdminEx', type: 'item', additionalParameters: { id: 'I11' } },
                        { name: 'Modern Elements', type: 'item', additionalParameters: { id: 'I12' } }
                    ],
                    delay: 400
                });
    
                var treeDataSource4 = new DataSourceTree({
                    data: [
                        { name: 'Dashboard<div class="tree-actions"><i class="fa fa-plus"></i><i class="fa fa-trash-o"></i><i class="fa fa-refresh"></i></div>', type: 'folder', additionalParameters: { id: 'F11' } },
                        { name: 'View Category<div class="tree-actions"><i class="fa fa-plus"></i><i class="fa fa-trash-o"></i><i class="fa fa-refresh"></i></div>', type: 'folder', additionalParameters: { id: 'F12' } },
                        { name: '<i class="fa fa-user"></i> User <div class="tree-actions"><i class="fa fa-plus"></i><i class="fa fa-trash-o"></i><i class="fa fa-refresh"></i></div><div class="tree-actions"><i class="fa fa-plus"></i><i class="fa fa-trash-o"></i><i class="fa fa-refresh"></i></div>', type: 'item', additionalParameters: { id: 'I11' } },
                        { name: '<i class="fa fa-calendar"></i> Events <div class="tree-actions"><i class="fa fa-plus"></i><i class="fa fa-trash-o"></i><i class="fa fa-refresh"></i></div>', type: 'item', additionalParameters: { id: 'I12' } },
                        { name: '<i class="fa  fa-gear "></i> Works <div class="tree-actions"><i class="fa fa-plus"></i><i class="fa fa-trash-o"></i><i class="fa fa-refresh"></i></div>', type: 'item', additionalParameters: { id: 'I12' } }
                    ],
                    delay: 400
                });
    
                var treeDataSource5 = new DataSourceTree({
                    data: [
                        { name: 'Dashboard<div class="tree-actions"><i class="fa fa-plus"></i><i class="fa fa-trash-o"></i><i class="fa fa-refresh"></i></div>', type: 'folder', additionalParameters: { id: 'F11' } },
                        { name: 'View Category<div class="tree-actions"><i class="fa fa-plus"></i><i class="fa fa-trash-o"></i><i class="fa fa-refresh"></i></div>', type: 'folder', additionalParameters: { id: 'F12' } },
                        { name: '<i class="fa fa-user"></i> User <div class="tree-actions"><i class="fa fa-plus"></i><i class="fa fa-trash-o"></i><i class="fa fa-refresh"></i></div><div class="tree-actions"><i class="fa fa-plus"></i><i class="fa fa-trash-o"></i><i class="fa fa-refresh"></i></div>', type: 'item', additionalParameters: { id: 'I11' } },
                        { name: '<i class="fa fa-calendar"></i> Events <div class="tree-actions"><i class="fa fa-plus"></i><i class="fa fa-trash-o"></i><i class="fa fa-refresh"></i></div>', type: 'item', additionalParameters: { id: 'I12' } },
                        { name: '<i class="fa  fa-gear "></i> Works <div class="tree-actions"><i class="fa fa-plus"></i><i class="fa fa-trash-o"></i><i class="fa fa-refresh"></i></div>', type: 'item', additionalParameters: { id: 'I12' } }
                    ],
                    delay: 400
                });
    
                var treeDataSource6 = new DataSourceTree({
                    data: [
                        { name: 'Dashboard<div class="tree-actions"><i class="fa fa-plus"></i><i class="fa fa-trash-o"></i><i class="fa fa-refresh"></i></div>', type: 'folder', additionalParameters: { id: 'F11' } },
                        { name: 'View Category<div class="tree-actions"><i class="fa fa-plus"></i><i class="fa fa-trash-o"></i><i class="fa fa-refresh"></i></div>', type: 'folder', additionalParameters: { id: 'F12' } },
                        { name: '<i class="fa fa-user"></i> User <div class="tree-actions"><i class="fa fa-plus"></i><i class="fa fa-trash-o"></i><i class="fa fa-refresh"></i></div><div class="tree-actions"><i class="fa fa-plus"></i><i class="fa fa-trash-o"></i><i class="fa fa-refresh"></i></div>', type: 'item', additionalParameters: { id: 'I11' } },
                        { name: '<i class="fa fa-calendar"></i> Events <div class="tree-actions"><i class="fa fa-plus"></i><i class="fa fa-trash-o"></i><i class="fa fa-refresh"></i></div>', type: 'item', additionalParameters: { id: 'I12' } },
                        { name: '<i class="fa  fa-gear "></i> Works <div class="tree-actions"><i class="fa fa-plus"></i><i class="fa fa-trash-o"></i><i class="fa fa-refresh"></i></div>', type: 'item', additionalParameters: { id: 'I12' } }
                    ],
                    delay: 400
                });
    
                $('#FlatTree').tree({
                    dataSource: treeDataSource,
                    loadingHTML: '<img src="images/input-spinner.gif"/>',
                });
    
    
                $('#FlatTree2').tree({
                    dataSource: treeDataSource2,
                    loadingHTML: '<img src="images/input-spinner.gif"/>',
                });
    
                $('#FlatTree3').tree({
                    dataSource: treeDataSource3,
                    loadingHTML: '<img src="images/input-spinner.gif"/>',
                });
    
                $('#FlatTree4').tree({
                    selectable: false,
                    dataSource: treeDataSource4,
                    loadingHTML: '<img src="images/input-spinner.gif"/>',
                });
    
    
            }
    
        };
    
    }();
    二、js中
        var load = layer.load();
    	$.post('${basePath}/agency/alf.shtml',{},function(result){
    		layer.close(load);
    		$("#FlatTree4").html(result.tree);
    	},'json');
    三、Controller中
    /**
         * 代理列表页查询树
         *
         * @return
         */
        @RequestMapping(value = "alf", method = RequestMethod.POST)
        @ResponseBody
        public Map<String, Object> alf(HttpServletRequest request) {
            Map<String, Object> map = new HashMap<String, Object>();
            AAfterLevel aafterlevel = new AAfterLevel();
            aafterlevel.setA_u_id_self(Integer.valueOf(TokenManager.getUserId().toString()));
            List<AAfterLevel> findSelf = aafterLevelService.findSelf(aafterlevel);
            String tree_ = "";
            tree_ = "<script>" + "function aclick_(th){" + "$(th).next().toggle();"
                    + "}" + "</script>";
            String url = request.getRequestURL().substring(0, request.getRequestURL().indexOf("shiro.demo/"))
                    + "shiro.demo";
            UUserAndExt findUAndEByUserId = new UUserAndExt();
            for (AAfterLevel aAfterLevel2 : findSelf) {
                findUAndEByUserId = uuserService.findUAndEByUserId((long) aAfterLevel2.getA_u_id_after());
                tree_ = tree_ + "<div class=\"tree-folder\" >"
                        + "<div class=\"tree-folder-header\" οnclick=\"aclick_(this)\">"
                        + "<i class=\"fa fa-user\"></i>"
                        + "<div class=\"tree-folder-name\" >"
                        + findUAndEByUserId.getEmail()
                        + "<div class=\"tree-actions\">"
                        + "<i class=\"fa fa-ellipsis-h\"></i>"
                        + "</div>"
                        + "</div>"
                        + "</div>"
                        + "<div class=\"tree-folder-content\" style=\"display: block;\">";
                if (findUAndEByUserId.getAfter_num() != 0) {
                    tree_ = tree_ + alf_(Integer.valueOf(findUAndEByUserId.getId().toString()), request);
                }
                tree_ = tree_
                        + "</div>"
                        + "<div class=\"tree-loader\" style=\"display: none;\"><img src=\"" + url
                        + "/images/input-spinner.gif\"></div>"
                        + "</div>";
            }
            map.put("tree", tree_);
            return map;
        }
    
        public String alf_(int id, HttpServletRequest request) {
            AAfterLevel aafterlevel = new AAfterLevel();
            aafterlevel.setA_u_id_self(id);
            List<AAfterLevel> findSelf = aafterLevelService.findSelf(aafterlevel);
            String tree_ = "";
            String url = request.getRequestURL().substring(0, request.getRequestURL().indexOf("shiro.demo/"))
                    + "shiro.demo";
            UUserAndExt findUAndEByUserId = new UUserAndExt();
            for (AAfterLevel aAfterLevel2 : findSelf) {
                findUAndEByUserId = uuserService.findUAndEByUserId((long) aAfterLevel2.getA_u_id_after());
    
                tree_ = "<div class=\"tree-folder\" >"
                        + "<div class=\"tree-folder-header\" οnclick=\"aclick_(this)\">"
                        + "<i class=\"fa fa-user\"></i>" + "<div class=\"tree-folder-name\" >"
                        + findUAndEByUserId.getEmail()
                        + "<div class=\"tree-actions\">"
                        + "<i class=\"fa fa-ellipsis-h\"></i>"
                        + "</div>"
                        + "</div>"
                        + "</div>"
                        + "<div class=\"tree-folder-content\" style=\"display: block;\">";
                if (findUAndEByUserId.getAfter_num() != 0) {
                    tree_ = tree_ + alf_(Integer.valueOf(findUAndEByUserId.getId().toString()), request);
                }
                tree_ = tree_
                        + "</div>"
                        + "<div class=\"tree-loader\" style=\"display: none;\"><img src=\"" + url
                        + "/images/input-spinner.gif\"></div>"
                        + "</div>";
            }
            return tree_;
        }