用easyui实现简单的treegrid分级列表简单实例

1、HTML中定义页面元素table

<table id="listGrid" class="easyui-datagrid"></table>

2、使用jquery调用treegrip

var route = {
    api_page: param.apiModulePath + '/page'
};
var $listGrid = $('#listGrid');
/**
 * 加载数据列表
 * @type {jQuery|HTMLElement}
 */
var loadGrid = function () {
    $listGrid.treegrid({
        url: route.api_page,
        idField: 'id',
        treeField:'menuName',
        rownumbers: true,
        columns: [[
            {
                field: 'menuName', title: '菜单名称', width: 200, align : 'left'
            },
            {
                field: 'checkStatus', title: '设置权限', width: 150, align : 'center'
            }
        ]],
        onLoadSuccess: function () {
            $listGrid.treegrid('collapseAll');
        }
    });
}

3、后台代码（主要表示构建数据结构用，代码不够简洁，用mybais plus循环调用了数据库）
entiry

public class RoleMenu extends BaseEntity {

    private String role;

    private String menu;

    @TableField(exist=false)
    private String checkStatus;

    @TableField(exist=false)
    private String menuName;

    @TableField(exist=false)
    private List<RoleMenu> children;
}

service构筑方法

    @Override
    public List<RoleMenu> getMenuStatusListByRole(RoleMenu form) {
        // 获取root菜单
        List<RoleMenu> rootRoleMenuList = this.baseMapper.getMenuList(form, 0);
        // 循环获取root菜单下的子菜单
        List<RoleMenu> retList = new ArrayList<RoleMenu>();
        for (RoleMenu rootRoleMenu : rootRoleMenuList) {
            List<RoleMenu> childRoleMenu = this.baseMapper.getMenuList(form, rootRoleMenu.getId());
            rootRoleMenu.setChildren(childRoleMenu);
            retList.add(rootRoleMenu);
        }
        return retList;
    }

4、展示效果