ExtJS3 treePanel 不能给根节点加复选框实现全选么

Matcha___ 2018-08-13 11:17:55

如题，ExtJS3 treePanel 不能给根节点加复选框实现全选么？注意是根节点不是父节点，另外，不能使用隐藏根节点的操作，因为根节点下具有多个兄弟节点的子节点

...全文

85 回复打赏收藏转发到动态举报

写回复

回复

切换为时间正序

请发表友善的回复…

发表回复

extjs带复选框的树包括全选反选子选父以及父选子与adf在jsp页面得应用包含了工具类以及针对extjs树节点增加、删除、修改的工具方法

通过修改网络上的一个树的例子实现节点的动态加载，还支持checkbox。

ExtJs4 Checkbox tree

下面是复选框的且带右键菜单的树代码。 HTML code 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:'/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="/contacterManage.do?action=delContacters&strContacterId="+node.id+";"; //alert("成功删除名为 :"+node.id+" 的联系人信息!"); } }else{ // 右键分组节点 var flag = confirm("您确定要删除名为 :“"+node.text+" ”的分组信息吗？"); if(flag == true){ //alert("成功删除名为 :"+node.id+" 的分组信息!"); location.href="/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{ // 右键分组节点 } } */ });

treePanel+chekBox全部选中以及清空选中，想必大家在学习使用过程中都见过这种效果吧，接下来为大家详细介绍下实现过程及细节，感兴趣的朋友可以参考下哈

87,997

社区成员

224,709

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章