1.说明
最近项目中要求创建一个可以选择的Tree，特此总结一下，大家一起学习。
2.源码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all-debug.css" />
<title>Insert title here</title>
<script type="text/javascript">
Ext.onReady(function(){
//menu数据
var data = [{"allowDelete":false,"allowDrag":false,"allowDrop":false,"allowEdit":false,"checked":false,
"children": [{"allowDelete":false,"allowDrag":false,"allowDrop":false,"allowEdit":false,"checked":false,"children":null,"expanded":false,"hidden":null,"href":null,"hrefTarget":null,"icon":null,"iconCls":"node","id":"26","infoMap":null,"leaf":true,"text":"查询所有用户"},
{"allowDelete":false,"allowDrag":false,"allowDrop":false,"allowEdit":false,"checked":false,"children":null,"expanded":false,"hidden":null,"href":null,"hrefTarget":null,"icon":null,"iconCls":"node","id":"27","infoMap":null,"leaf":true,"text":"删除用户"}],
"expanded":true,"hidden":null,"href":null,"hrefTarget":null,"icon":null,"iconCls":"node","id":"deviceSystem","infoMap":null,"leaf":false,"text":"用户管理"},
{"allowDelete":false,"allowDrag":false,"allowDrop":false,"allowEdit":false,"checked":false,
"children":[{"allowDelete":false,"allowDrag":false,"allowDrop":false,"allowEdit":false,"checked":false,"children":null,"expanded":false,"hidden":null,"href":null,"hrefTarget":null,"icon":null,"iconCls":"node","id":"37","infoMap":null,"leaf":true,"text":"查询所有设备"},
{"allowDelete":false,"allowDrag":false,"allowDrop":false,"allowEdit":false,"checked":false,"children":null,"expanded":false,"hidden":null,"href":null,"hrefTarget":null,"icon":null,"iconCls":"node","id":"38","infoMap":null,"leaf":true,"text":"更新设备"}],
"expanded":true,"hidden":null,"href":null,"hrefTarget":null,"icon":null,"iconCls":"node","id":"emailServers","infoMap":null,"leaf":false,"text":"设备管理"}
];
var treeStore= Ext.create('Ext.data.TreeStore', {
autoLoad: true,
proxy: {
//数据来自于内存
type: 'memory',
data: data
},
root: {
expanded: true
}
});
/***
* 选中树节点状态变化调用该函数
* 【全选】，【取消全选】操作在这里实现
*/
function onCheckchange(node, checked, eOpts){
//如果不是叶子节点
if(!node.isLeaf()){
//扩展,设置为选中状态
node.expand();
node.data.checked = checked;
node.eachChild(function(child){
//设置每一个子节点选中状态，并更新画面显示
child.data.checked = checked;
child.triggerUIUpdate();
});
}
};
//确认按钮
var confirm = Ext.create('Ext.button.Button', {
text: '确认',
handler: onSubmit
});
//树面板
var treePanel = Ext.create('Ext.tree.Panel',{
stripeRows: true,
border:0,
width:300,
height: 250,
style: {
borderRight: 'none'
},
rootVisible: false,
store: treeStore,
useArrows: true,
tbar: {
items: [{
xtype: 'tbspacer',
flex: 1
},
confirm
]
},
listeners:{
checkchange:onCheckchange
}
});
/***
* 确认事件处理函数。
*/
function onSubmit(){
//获取树中所有选择的节点
var records = treePanel.getView().getChecked();
var names = [];
Ext.Array.each(records, function(rec){
//只保存子节点的数据
var leaf = rec.get('leaf');
if(leaf){
var text = rec.get('text');
names.push(text);
}
});
var nameStr = names.join('<br />');
Ext.Msg.alert('提示','您选择了：<br />'+nameStr);
};
//显示Window
Ext.create('Ext.window.Window', {
title: '可选择树展示',
height: 260,
width: 300,
layout: 'fit',
items: [
treePanel
]
}).show();
});
</script>
</head>
<body>
</body>
</html>
3.运行效果：
点击父节点，可以同时选中其下所有的子节点。实现【全选】【取消全选】的功能。
4.特别说明
当我们向后台请求数据时，需要要向后台传递一些自定义的参数。
对于Ext.data.Store，我们可以指定param。
但Ext.data.TreeStore则不同，指定param实验后无效。
Ext.create('Ext.data.TreeStore',{
//nodeParam是节点参数，注意这个是参数名，defaultRootId是参数值。
nodeParam : 'roleId',
defaultRootId : roleId
});
