Extjs中树形的运用（后台代码用java）项目中角色管理资源

后台系统的权限管理中，总是会用到资源，而前台展示的时候，EXTjs 中很多时候会用树形去展示资源。

这里我以项目中角色中管理资源为例。（用的是Spring3.1.2管理项目MVC）

（1）首先看一下前台的角色中的js代码：

{
fieldLabel : '资源模块',
height: 300,
xtype : 'treepanel',
width: 280,
checkModel: 'cascade',
region : 'east',
onlyLeafCheckable: false,//对树所有结点都可选
animate: false,
rootVisible: false,
autoScroll:true,
root: {
nodeType: 'async'
},
loader: new Ext.tree.TreeLoader({
dataUrl: 'system/resource/resourceTree.json?type=2',
baseAttrs: {uiProvider: Ext.ux.TreeCheckNodeUI}
}),
listeners: {
checkchange: function(node, checked){
node.expand();
node.attributes.checked = checked;
node.eachChild(function(child) {
child.ui.toggleCheck(checked);
child.attributes.checked = checked;
child.fireEvent('checkchange', child, checked);
})
},
afterRender: function (t) {
treeP = t;
treeP.root.expand(true);
}
}
}

这是extjs中的代码，具体的属性，我就不详细解释了，看文档。

（2）根据dataUrl: 'system/resource/resourceTree.json?type=2'

请求的路径，我们在后台的控制类中Controller中：

/**
* 资源树
* @param model
*/
@RequestMapping("resourceTree")
public void resourceTree(Model model,Integer type) {
List<TreeNode> listChildNode =resourceService.getChildNodeList(0,type==1?false:true);
List<TreeNode> listNode = new ArrayList<TreeNode>();
TreeNode node =new TreeNode();
node.setText("平台后台");
node.setLeaf(false);
node.setType(0);
node.setId(0);
if(type==2){
node.setChecked(false);
}
node.setChildren(listChildNode);
listNode.add(node);
model.addAttribute("nodes",listNode);
model.addAttribute(SUCCESS, true);
}

(3）在逻辑处理层Service中：

/**
* 树形集合
* @param pid
* @return
*/
public List<TreeNode> getChildNodeList(int pid,boolean hasChecked){
List<TreeNode> list =resourceMapper.selectChildNodeList(pid);
for(TreeNode rn:list){
List<TreeNode> innerList =getChildNodeList(rn.getId(),hasChecked);
rn.setChildren(innerList);
if(hasChecked){
rn.setChecked(false);
};
if(rn.getPid().intValue()==0){
rn.setLeaf(false);//第一级全部不是叶子
}else{
rn.setLeaf(innerList.size()==0?true:false);
}
}
return list;
}

这里用到了一个递归的函数方法调用，目的是遍历所有的根的节点

（4）在映射类Mapper中代码：

/**
* 找出子节点
* @param pid
* @return
*/
List<TreeNode> selectChildNodeList(int pid);

（5）在XMl配置中的SQl语句：

<select id="selectChildNodeList" resultType="TreeNode" parameterType="Integer">
SELECT
id,name,pid,display_name as text,type,create_time as createTime,sort
FROM
sb_resource
WHERE pid=#{pid}
</select>

(6）这样得到的前台的展示：



这样就大体的介绍了用spring的MVC管理项目，数据用EXTjs展示的树形的流程。

（7）另外再介绍一下，怎样用树形展示角色拥有的资源.

(8)同样在js中代码：

{
fieldLabel : '资源模块',
height: 300,
xtype : 'treepanel',
width: 280,
checkModel: 'cascade',
region : 'east',
onlyLeafCheckable: false,//对树所有结点都可选
animate: false,
rootVisible: false,
autoScroll:true,
root: {
nodeType: 'async'
},
loader: new Ext.tree.TreeLoader({
dataUrl: 'system/resource/getResourceByRole.json?roleId='+record.get('id'),
baseAttrs: {uiProvider: Ext.ux.TreeCheckNodeUI}
}),
listeners: {
checkchange: function(node, checked){
node.expand();
node.attributes.checked = checked;
node.eachChild(function(child) {
child.ui.toggleCheck(checked);
child.attributes.checked = checked;
child.fireEvent('checkchange', child, checked);
})
},
afterRender: function (t) {
treeP2 = t;
treeP2.root.expand(true);
}
}
}

(9）请求 dataUrl: 'system/resource/getResourceByRole.json?roleId='+record.get('id')

这里是根据角色的id去展示拥有的资源.

(10)Controller类中代码：

/**
* 角色已拥有的权限
* @param model
* @param roleId
*/
@RequestMapping("getResourceByRole")
public void getResourceByRole(Model model,Integer roleId) {
List<TreeNode> listNode =resourceService.getRoleResources(roleId);
model.addAttribute("nodes",listNode);
model.addAttribute(SUCCESS, true);
}

(11）在Service类中：

/**
* 初始化已有的资源
* @param roleId
* @return
*/
public List<TreeNode> getRoleResources(int roleId){
List<Integer> roleIds= resourceMapper.queryResourceByRole(roleId);
List<TreeNode> listChildNode =getChildNodeListByRole(0,roleIds);
return listChildNode;
}

public List<TreeNode> getChildNodeListByRole(int pid,List<Integer> idList){
List<TreeNode> list =resourceMapper.selectChildNodeList(pid);
for(TreeNode rn:list){
List<TreeNode> innerList =getChildNodeListByRole(rn.getId(),idList);
rn.setChildren(innerList);
if(idList.contains(rn.getId())){
rn.setChecked(true);
}else{
rn.setChecked(false);
}
if(rn.getPid().intValue()==0){
rn.setLeaf(false);//第一级全部不是叶子
}else{
rn.setLeaf(innerList.size()==0?true:false);
}
}
return list;
}

（12）在Mapper类中：

/**
* 根据角色查权限
* @return
*/
List<Integer>  queryResourceByRole(int roleId);

/**
* 找出子节点
* @param pid
* @return
*/
List<TreeNode> selectChildNodeList(int pid);

(13）在XML中的SQL语句：

<select id="queryResourceByRole" parameterType="Integer" resultType="Integer">
SELECT
resource_id
FROM
sb_role_resource
WHERE
role_id=#{roleId}
</select>

<select id="selectChildNodeList" resultType="TreeNode" parameterType="Integer"> SELECT id,name,pid,display_name as text,type,create_time as createTime,sort FROM sb_resource WHERE pid=#{pid} </select>

（14）前台的EXT展示图：



（15）这样就把两种情况下的树形都可以展示了，一种是查询所有的节点数据，另一种是根据条件展示拥有的节点的数据。

后续有很多开发填坑的文章发布，如果对你有帮助，请支持和加关注一下

http://e22a.com/h.05ApkG?cv=AAKHZXVo&sm=339944

https://shop119727980.taobao.com/?spm=0.0.0.0