下面是复选框的且带右键菜单的树代码。
HTML code
<body>
<script>
Ext.BLANK_IMAGE_URL = "../resources/images/default/s.gif";
Ext.QuickTips.init();
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
Ext.onReady(function(){
/************************** 联系人树形菜单**************************/
var contacterTree = new Ext.tree.TreePanel({
id:"treePanelContact",
border:false,
lines:false, // 去掉树的线
rootVisible:true,
autoScroll:true,
animate:true,
width:200,
height : 468,
style:"background-color:#FFFFFF;border-color:#0099FF;",
// enableDD: false, // 允许树可以拖拽
containerScroll: true,
loader: new Ext.tree.TreeLoader({
dataUrl:'<%=path%>/treeOperation.do?action=loadTree'
}),
root:new Ext.tree.AsyncTreeNode({
id : "treeContact",
text: '联系人',
draggable:false,
expanded: true // 展开根节点下的节点
}),
listeners:{
click : function(node){
if(node.id == "treeContact"){
// 如果点击的是根节点，则 GridPanel 显示所有的数据
// store.load({params:{flag:'all'}});
}
else if(node.isLeaf() == true){
// 如果点击的是枝节点的话，则根据 ID 查询联系人的信息
// store.load({params:{flag:'contacter',contacterId:node.id}});
}else{
// 如果既不是根节点也不是枝节点，那么点击的就是分组节点，
// 则 GridPanel 显示对应分组号的联系人信息
// store.load({params:{flag:'group',groupId:node.id}});
}
}
}
});
// 添加 树的右键菜单
contacterTree.on('contextmenu', menuShow);
function menuShow ( node )
{
treeRightMenu.show(node.ui.getAnchor());
node.select();//让右击是选中当前节点
};
var treeRightMenu = new Ext.menu.Menu({
id: 'treeMenuContext',
items: [
{
text: '搜索联系人',
icon:"../images/shared/icons/fam/search.gif",
handler:function()
{
Search_Contacter("搜索联系人"); // 具体可以根据自己的需求来写。。
}
},
{
text: '添加联系人',
icon:"../images/shared/icons/fam/add.gif",
handler:function()
{
AddContacter("新增联系人"); // 具体可以根据自己的需求来写。。
}
},{
text: '添加分组',
icon:"../images/shared/icons/fam/add.gif",
handler:function()
{
AddContacterGroup("新增分组"); // 具体可以根据自己的需求来写。。
}
},{
text: "删除",
icon: "../images/shared/icons/fam/delete.gif",
handler:function()
{
treeDelContacter(); // 具体可以根据自己的需求来写。。
}
}
/* ,{
text:"修改",
icon: "../images/shared/icons/fam/cog_edit.png",
handler:function()
{
treeEditContacter();
}
} */
]
});
// 当选中父节点时，让其子节点相应选中
contacterTree.on('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);
});
}, contacterTree);
// 删除事件
function treeDelContacter(){
// 当右键点击删除时，先判断右键点击的是分组节点还是枝节点
// 通过选择模型来得到右键点击的节点
var selectModel = contacterTree.getSelectionModel();
var node = selectModel.getSelectedNode();
if(node.id == "treeContact"){
// 右键根节点
Ext.MessageBox.alert("提示","根节点是不允许删除的！");
}else if(node.isLeaf() == true){
// 右键 联系人节点
var flag = confirm("您确定要删除名为 :“"+node.text+" ”的联系人信息吗？");
if(flag == true){
location.href="<%=path%>/contacterManage.do?action=delContacters&strContacterId="+node.id+";";
//alert("成功删除名为 :"+node.id+" 的联系人信息!");
}
}else{
// 右键 分组节点
var flag = confirm("您确定要删除名为 :“"+node.text+" ”的分组信息吗？");
if(flag == true){
//alert("成功删除名为 :"+node.id+" 的分组信息!");
location.href="<%=path%>/contacterManage.do?action=delContacterGroup&strGroupId="+node.id+";";
}
}
}
// 修改事件
/* function treeEditContacter(){
// 当右键点击删除时，先判断右键点击的是分组节点还是枝节点
// 通过选择模型来得到右键点击的节点
var selectModel = contacterTree.getSelectionModel();
var node = selectModel.getSelectedNode();
if(node.id == "treeContact"){
// 右键根节点
Ext.MessageBox.alert("提示","根节点是不允许修改的！");
}else if(node.isLeaf() == true){
// 右键 联系人节点
}else{
// 右键 分组节点
}
} */
});
### 复选框的且带右键菜单的树代码知识点解析
#### 一、概述
本文档介绍了一段实现带有复选框功能以及右键菜单的树形结构代码。该树形结构主要用于展示联系人信息，并支持用户进行一系列操作如搜索、添加、删除等。下面将对这段代码的关键部分进行详细解析。
#### 二、关键知识点解析
##### 1. 初始化配置
- **`Ext.BLANK_IMAGE_URL`**: 设置Extjs库默认图片路径。
- **`Ext.QuickTips.init()`**: 初始化快速提示功能，用于显示鼠标悬停时的提示信息。
- **`Ext.state.Manager.setProvider(new Ext.state.CookieProvider())`**: 设置状态管理器的状态提供者为CookieProvider，意味着应用的状态会存储在cookie中，以便在页面刷新后恢复应用的状态。
##### 2. 树形面板配置
- **`contacterTree`**: 创建一个`TreePanel`对象，用作联系人树形结构的主要容器。
- `id`: 设置树形面板的唯一标识符。
- `border`: 设置边框是否可见。
- `lines`: 设置是否显示节点之间的连线。
- `rootVisible`: 设置根节点是否可见。
- `autoScroll`: 设置当内容超出容器高度时自动滚动。
- `animate`: 设置展开或折叠节点时是否有动画效果。
- `width` 和 `height`: 设置树形面板的宽度和高度。
- `style`: 设置树形面板的样式。
- `enableDD`: 设置是否启用拖放功能。
- `containerScroll`: 设置容器内部是否可以滚动。
- `loader`: 设置树形面板的数据加载器，指定数据URL。
- `root`: 设置树形面板的根节点。
- `listeners`: 设置监听事件。
##### 3. 监听事件
- **`click`**: 当用户点击树中的某个节点时触发。
- 检查点击的节点是否为根节点、叶子节点（联系人）或者分组节点，并执行相应的操作。
- **`checkchange`**: 当用户改变复选框状态时触发。
- 更新节点及其所有子节点的复选框状态，实现全选或反选的功能。
##### 4. 右键菜单功能
- **`menuShow`**: 定义右键点击时显示菜单的处理函数。
- 使用`treeRightMenu.show(node.ui.getAnchor())`显示菜单，并选中当前节点。
- **`treeRightMenu`**: 定义右键菜单对象。
- 包含多个菜单项，每个菜单项都有图标和对应的处理函数：
- “搜索联系人”：调用`Search_Contacter`函数。
- “添加联系人”：调用`AddContacter`函数。
- “添加分组”：调用`AddContacterGroup`函数。
- “删除”：调用`treeDelContacter`函数。
- “修改”：调用`treeEditContacter`函数（注释掉了）。
##### 5. 功能函数
- **`treeDelContacter`**: 删除功能实现。
- 首先判断当前选中的节点类型（根节点、叶子节点、分组节点），并根据不同的类型执行不同的操作。
- 使用`location.href`跳转到服务器端的处理函数，实现删除操作。
- **`treeEditContacter`**: 修改功能实现（被注释掉）。
#### 三、总结
本文档提供的代码实现了基于Extjs框架的树形结构，其中包含了复选框功能及右键菜单功能。该树形结构主要用于联系人管理系统的开发，提供了丰富的用户交互体验。通过以上知识点的解析，可以帮助开发者更好地理解和运用这段代码，从而应用于实际项目中。
