[size=medium]
Ext的treepanel 没有自带checkbox级联选择效果,因为用得着,所以自己动手写了个, 现将代码分享一下, 欢迎批评指正。
由于我在改变节点复选框的选中状态后没有调用其onCheckChange()方法, 所以在获取已选中的节点时不能使用tree.getSelected()方法. 于是自己也相应为自己的级联添加了getSelected()方法.代码是用editplus写的, 没有用IDE, 为节省功夫, 注释不是很规范, 请见谅.
下面是测试代码:
Ext.onReady(function(){
var root=new Ext.tree.TreeNode({
text:"root",
id:"root",
checked:false
});
var tree=new Ext.tree.TreePanel({
renderTo:Ext.getBody(),
width:200,
root:root,
listeners:{
"checkchange": function(node){
cascadeCheck(node);
}
},
buttons:[{
text:"显示已选",
handler:function(){
var selected=getSelected(root);
//alert(selected.length);
}
}]
});
for(var first=0;first<3;first++){
var flNode=new Ext.tree.TreeNode({
text:"第一级目录_"+first,
id:"first_level_"+first,
checked:false
});
root.appendChild(flNode);
for(var second=0;second<3;second++){
var slNode=new Ext.tree.TreeNode({
text:"第二级目录_"+first+"_"+second,
checked:false,
id:"second_level_"+first+"_"+second
});
flNode.appendChild(slNode);
for(var third =0;third<3;third++){
var tlNode=new Ext.tree.TreeNode({
text:"第三级目录_"+first+"_"+second+"_"+third,
id:"third_level_"+first+"_"+second+"_"+third
});
}
}
}
tree.expandAll();
});
function cascadeCheck(node){
//调用函数改变子孙节点的状态
changeChildrenStatus(node,isChecked(node));
//调用函数改变祖先节点的状态
changeParentStatus(node);
//函数: 改变改变子孙节点的状态
function changeChildrenStatus(node,checked){
if(node.hasChildNodes()){
node.eachChild(function(child){
changeChildrenStatus(child,checked);
});
}
node.ui.checkbox.checked=checked;
}
//函数: 改变祖先节点的状态
function changeParentStatus(node){
var parent=node.parentNode;
if(!parent){
return ;
}
var siblings=getSiblings(node);
var checked=true;
for(var i=0;i<siblings.length;i++){
if(!isChecked(siblings[i])){
checked=false;
}
}
setChecked(parent, checked);
changeParentStatus(parent);
}
//函数:得到节点的兄弟节点
function getSiblings(node){
var siblings=[];
var parent=node.parentNode;
if(parent){
parent.eachChild(function(sibling){
siblings.push(sibling);
});
}
return siblings;
}
}
//如果节点前的checkbook已被选中, 返回true, 否则返回false
function isChecked(node){
return node.ui.checkbox.checked;
}
//将节点前的checkbook的选中状态设为checked
function setChecked(node, checked){
node.ui.checkbox.checked=checked;
}
//得到一个节点下所有被选中的节点, 返回值为一节点数组
function getSelected(root){
var selected=[];
if(isChecked(root)){
selected.push(root);
}
root.eachChild(function(child){
selected=selected.concat(getSelected(child));
});
return selected;
}
为了使用方便, 我还将其封装成一个treeUtil对象, 代码在附件中, 使用时引用这个js文件, 调用函数时在前面加个treeUtil.就行了.
[/size]
- 大小: 17.2 KB
分享到:
相关推荐
NULL 博文链接:https://pridesnow.iteye.com/blog/815193
使用layui实现的可以多选的级联选择器,无限级联选择
ext 级联选择的树形控件,有实例用法,不明白的请发邮件到cencai06@163.com
jsp实现级联菜单jsp实现级联菜单jsp实现级联菜单jsp实现级联菜单jsp实现级联菜单
级联选择器,当一个数据集合有清晰的层级结构时,可通过级联选择器逐级查看并选择
JSP Ext spring级联分页程序,JSP分页程序示例,结合漂亮的extjs框架实现。由于空间问题web-inf/lib里的jar文件未引入,本项目是在struts2 hibernate spring构架下的,所以需要引入这些jar包。
基于Vue的级联选择器,可以单项,二级, 三级级联,多级级联
elementUI实现级联选择器 本文实例为大家分享了elementUI实现级联选择器的具体代码,供大家参考,具体内容如下 1、从后端调用接口,传递数据到前端 2、使用VUE代码显示级联选项 :disabled="isDisabled" :...
使用于iview 中 Cascader 级联选择的 省、市、县数据 ,在项目中亲自测试过没有任何问题,使用如果有问题请联系
jQuery+div实现级联省份-城市查询,该实例包含jsp+js+css,所有代码为本人亲自编写,如有疑问请联系本人
用JS实现树型结构的级联选择..类似XP的资源管理器.
NULL 博文链接:https://luhai1992.iteye.com/blog/642619
级联 ajax实现方式 通过数据库分表方式 PHP语言实现
NULL 博文链接:https://dengli19881102.iteye.com/blog/1046661
使用jquery实现的仿人人网高校级联选择,但无国家选择,学校数据保存在JS中,可自行拓展至xml文件或者数据库中!已在主流浏览器中测试!
c# winform datagridview 中嵌套的combobox实现级联选择
angularjs实现的省市区地址级联选择器 演示地址:http://www.jq22.com/plugin/632
Wpf ComboBox 多级正向级联比较容易实现,想实现反向级联...本示例程序为一个简约到极致的企业管理系统,使用EF Code First,Sql Compact数据库,实现不同地址的5级行政区划选择和浏览,实时产生含行政区划名称的地址。
本文探讨一下在vue中的实现级联选择器,自己在项目中碰到过以下两种情况的后端数据,查阅资料后也证实了这两种数据的合理性: 预览地址 github地址 1 后端处理数据逻辑 这种情况是比较推荐的,大量的数据运算放在后...