用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、展示效果