ExtJS4.2 根据数据库记录构建树形菜单

  背景：最近用ExtJS4.2做一个系统，需要在前端展示资源菜单，为树形结构，该树形结构是从数据库动态加载的。

  ExtJS的树形结构大致有两种情况：

    1.静态树形结构，此处不多说，看API就能简单明白；

    2.动态加载，ExtJS的特性是根据父节点ID来查询子节点，从而动态更新树形菜单，这里有一个缺陷，或许是我孤陋寡闻不知道，那就是无法根据数据库节点信息自动构建成为一棵树，记得zTree插件就有这个功能。

  那么，我希望能够根据数据库树节点信息自动的构建成一棵树，就需要自己去写个小算法在后台拼接成ExtJS需要的数据结构。

  代码部分：

  1.节点pojo，必要属性有：节点ID（id）、父节点ID（parentId)、文本信息（text）、孩子（children），其他属性，比如节点url，顺序order等根据自己需要设置。

public class Resource {

    private Integer id;

    private String text;

    private Integer parentId;

    private Boolean expanded;

    private List<Resource> children = new ArrayList<Resource>();
　　

}

  2.根据查询出来的节点List集合拼装成为前端展示需要的结构，这里写了个静态方法。

    public static final <T> List<T> buildTree(List<T> nodes) {

        if(null == nodes || nodes.size() == 0) return null;

        

        Map<Integer, T> resources = new HashMap<Integer, T>();

        List<T> result = new ArrayList<T>();

        

        try {

            for(int i=0; i<nodes.size(); i++) {

                T node = nodes.get(i);

                Method getId = node.getClass().getMethod("getId");

                Integer id = (Integer) getId.invoke(node);

                resources.put(id, node);

            }

            

            for (Map.Entry<Integer, T> e : resources.entrySet()) {

                T node = e.getValue();

                Method getparentId = node.getClass().getMethod("getParentId");

                Integer parentId = (Integer) getparentId.invoke(node);

                if(parentId == 0) {

                    result.add(node);

                } else {

                    T parent = resources.get(parentId);

                    if( null != parent) {

                        @SuppressWarnings("unchecked")

                        List<T> children = (List<T>) parent.getClass().getMethod("getChildren").invoke(parent);

                        children.add(node);

                    }

                }

            }

        } catch (Exception e) {

            e.printStackTrace();

        }

        return result;

    }

  3.数据库记录。

  

  4.ExtJS前端代码。

Ext.onReady(function() {

    var store = Ext.create('Ext.data.TreeStore', {

        proxy: {

            type: 'ajax',

            url: 'your url'

        },

        root: {

            text: '系统菜单',

            id: 0,

            expanded: true

        }

    });

    var treePanel = Ext.create('Ext.tree.Panel', {

        title: '树形菜单',

        width: 300,

        height: 350,

        margin: '50 0 0 500',

        store: store,

        rootVisible: false,

        useArrows: true,

        renderTo: Ext.getBody()

    });

});

  5.效果图。

  

  6.完毕。