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

一、需要引入的资源
<!--tree-->
<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_;
    }