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