结果图
树形结构extjs的类能完美解析，后台返回的只是简单list<Map<String,String>>
不过value里的内容要有关系，比如01，0101， 010101以此类推
讲完后台的数据格式再来讲前台的显示
新建权限模型
Ext.
define(
'RightsModel', {
extend:
'Ext.data.Model',
idProperty:
'Id',
fields: [
{
name:
'funID', type:
'string'}
,
{
name:
'ffunID', type:
'string'}
,
{
name:
'funName', type:
'string'}
,
{
name:
'note', type:
'string'}
]
})
;
解析树形核心代码：树形store，存储树形数据
var storeRights = Ext.
create(
'Ext.data.TreeStore', {
autoLoad:
true,
model:
'RightsModel',
folderSort:
false,
proxy: {
type:
'ajax',
url:
'Sys/loadPermission',
reader: {
type:
'json'}
}
,
listeners: {
beforeload:
function (store
, options) {
var params = {
roleId: _RoleID}
;
Ext.
apply(store.
proxy.
extraParams, params)
;
}
}
})
; 列名：
var cmRights = [{
xtype:
'treecolumn',
text:
'名称',
sortable:
false,
dataIndex:
'funName',
width:
250,
titleAlign:
'center'
}
, {
text:
'编号',
dataIndex:
'funID',
width:
100,
titleAlign:
'center'
}
, {
text:
'备注',
sortable:
false,
flex:
1,
dataIndex:
'note',
titleAlign:
'center'
}]
; 树形面板显示数据
var treeRights = Ext.
create(
'Ext.tree.Panel', {
title:
'权限',
store: storeRights
,
rootVisible:
false,
frame:
false,
columnLines:
true,
checkModel:
"parentCascade",
multiSelect:
false,
singleExpand:
true,
columns: cmRights
,
height:
390,
listeners: {
"checkchange":
function (node
, state) {
//-------------------------------------------------
//级联勾选多个父级节点
checkedParentNode(node
, state)
//-------------------------------------------------
//级联勾选子级节点
node.
cascadeBy(
function (child) {
child.
set(
"checked", state)
;
})
;
//-------------------------------------------------
}
}
})
;
function checkedParentNode(node
, state) {
if (node.
parentNode !=
null) {
if (state) {
node.
parentNode.
set(
'checked', state)
;
}
checkedParentNode(node.
parentNode, state)
}
} 点击的事件，点击一个节点，把他所有的父节点都选中，并且把他所有的子节点都选中，同级的不选。
新建窗口显示这个面板
var winPerm =
new Ext.window.Window({
title:
'MODBUS子设备信息',
width:
520,
height:
350,
modal:
true,
resizeable:
false,
collapsible:
true,
closeAction:
'close',
bodyStyle:
'padding:5px;',
layout:
'fit',
buttonAlign:
'center',
items: [formPerm]
,
buttons: [{
type:
'button',
text:
'关 闭',
handler:
function () { winPerm.
close()
; }
}]
})
;
}
winPerm.
show()
; 完成。
转载请注明原文地址: https://ju.6miu.com/read-679939.html
