dtree 扩展

最近在公司的项目中,需要使用到树形结构,其中一部分需要单选按钮,当点击时把节点的值传给其他对象。 在网上搜索了一下,找到一个这方面的例子,自己再根据需要,把dtree做了一些改动。可以选择根据需要使用单选按钮或者是复选框。
其修改过程大致如下:
(本程序源代码及实例下载地址:http://download.csdn.net/source/756744)
1.给树对象的config对象添加一个控制checkbox是否显示的属性;
this.config = {

target : null,

folderLinks : true,

useSelection : true,

useCookies : true,

useLines : true,

useIcons : true,

useStatusText : false,

closeSameLevel : false,

inOrder : false,

useRadio : false, //yanal添加,设置是否有添加单选按钮

useCheckbox : false //yanal添加,设置是否使用复选框
}

2.修改节点对象的dTree.prototype.node()方法,添加如下代码;
//添加单选按钮radio ,在调用页面把第一个节点id设置为0,该节点不添加单选按钮
// 此处的getRadioSelected方法具体实现在调用树的页面
if(this.config.useRadio && node.id != 0){
str +='<input type="radio" name="chk" id="r'+ this.obj + nodeId + '" οnclick="getRadioSelected('+nodeId+')" value="'+node.id+'"/>';
}

//添加复选框,在调用页面把第一个节点id设置为0,该节点不添加复选框。此处的方法selectCheckbox在本JS内部实现
if(this.config.useCheckbox == true && node.id != 0){
str+= '<input type="checkbox" id="c'+ this.obj + nodeId + '" οnclick="javascript:'+this.obj+'.selectCheckbox('+nodeId+')"/>';
}
3.外部实现当单选按钮选中时,得到节点值的函数
function getRadioSelected(nodeId){
var nname = mytree.aNodes[nodeId].name; //此处得到的是所选择节点的name值,根据需要,同样可得到其他的值
document.getElementById('exID').value = "你选择了:" + nname;
}

4. 添加一个内部方法,用递归实现,当勾选一个父节点是,其子节点全部选中
dTree.prototype.selectCheckbox=function(nodeId){
var cs = document.getElementById("c"+this.obj+nodeId).checked;
var node = this.aNodes[nodeId];
var len =this.aNodes.length;
for (n=0; n<len; n++) {
if ((n != nodeId) && (this.aNodes[n].pid == node.id)) {
document.getElementById("c"+this.obj+n).checked=cs;
this.selectCheckbox(n);
}
}
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值