首页 新闻 搜索 专区 学院

如何使用JS给TreeView添加节点

1
悬赏园豆:20 [已解决问题] 解决于 2013-01-15 13:25

var s = "0,1,父节点|1,1,子节点|1,2,子节点|";
var list = s.value.split('|');
for (var j = 0; j < list.length; j++) {
  var list1 = list[j].split(',');
  if (list1[0] == "0") {  
  var cid = list1[1];
  var name = list1[2];
  alert('cid=' + cid + ' name=' + name);
  //在这里如何把cid和name添加到TreeView里呢?
  }
  }
各位大虾,求源码!小弟先谢啦!

蒋坤的主页 蒋坤 | 初学一级 | 园豆:152
提问于:2011-05-25 13:44
< >
分享
最佳答案
0

我之前做过一个是用jQuery实现的treeview,各个节点的数据都是从数据库中读出来的,在页面上,当你点击一个根节点的时候就会从数据库中查找到它的子节点,然后显示在父节点下面,主要就是实现一个树形结构的菜单样式,我们使用jQuery+css+html做的,我把一些代码以及文档帮助给你看一下,看能不能对你有帮助……你可以把扣扣邮箱给我,我还有相关的文档资料可以给你……

// JavaScript Document
/*
连接数据库2008************************************/
//定义两个全局变量tempstr,idtempstr,分别是记住从数据库中取得的子节点名称和对应的子节点id
var tempstr;
var idtempstr;
function connectDb(id,sql)
{
var conn = new ActiveXObject("ADODB.Connection");
conn.Open(
"Provider=SQLOLEDB.1;Server=.\\SQLEXPRESS;User ID=sa; "
+"Password=111; Initial Catalog=TreeView");
var rs = new ActiveXObject("ADODB.Recordset");
var rsid=new ActiveXObject("ADODB.Recordset");
var sql="select nodename from nodes where fathernode="+id;
var idsql="select id from nodes where fathernode="+id;
rs.open(sql, conn);
rsid.open(idsql, conn);
tempstr
="";
idtempstr
="";
while(!rs.EOF||!rsid.EOF)
{
/* http://kb.cnblogs.com/page/50337/*/
tempstr
= tempstr +rs("nodename")+',';
idtempstr
= idtempstr +rsid("id")+',';
rs.MoveNext;
rsid.MoveNext;
}
rs.close();
rs
= null;
rsid.close();
rsid
= null;
conn.close();
conn
= null;
}
//定义一个全局变量n用来记住每次新添加节点的id值,这个id是从数据库中获得的id
var n=0;
$(document).ready(
function addnode(currentid)
{$(
'#text').val('');
$(document.getElementById(currentid)).css(
'list-style-image', 'url(images/isselected_sphsj.jpg)');
$(document.getElementById(currentid)).find(
'img').attr('src','images/openFile.gif');
currentid
=n;
connectDb(currentid);
var arr=new Array();
arr[
0]=tempstr.split(',');
arr[
1]=idtempstr.split(',');
/*实现全选$(document.getElementById(n)).find("input")是找到当前创建的li的后面的所有checkbox的所以要用this.parentNode.id获得你点击的那个id值*/
$(document.getElementById(n)).find(
"input").bind("click",function(){
var id=this.parentNode.id;

window.event.cancelBubble
=true;
if($(this).attr("checked")==true){
$(
"#"+id+" input").each(function(){
$(
this).attr("checked","checked");
});
}
else{
$(
"#"+id+" input").each(function(){
$(
this).attr("checked",false);
});
}

})


/*点击一个li得到这个节点下面的所有子节点*/
for(var i=0;i<arr[0].length;i++)
{
if(arr[0][i]!='')
{

/*得到子节点之后在当前父节点也就是世界这个节点下面添加节点*/
var father=document.getElementById(currentid);
var childul=document.createElement('ul');
var childli=document.createElement('li');
$(childli).attr(
'id',n );
var img=document.createElement('img');
$(img).attr(
'src',"images/closeFile.gif");
var check=document.createElement('input');
$(check).attr(
'type','checkbox' );
var txt=document.createTextNode(arr[0][i]);
childli.appendChild(img);
childli.appendChild(check);
childli.appendChild(txt);
childul.appendChild(childli);
father.appendChild(childul);

/*得到每一个新节点在数据库中的id,分别赋值给每一个新创建的节点的id*/
for( var j=0;j<arr[1].length;j++)
{
if(arr[1][j]!='')
{
$(childli).attr(
'id',arr[1][j]);
$(childli).toggle(
function (event){
$(
'#label').text($(this).text());

window.event.cancelBubble
= true;
n
=$(this).attr('id');
addnode(n);
},
function (event){
$(
this).find('ul').remove();
$(
this).css('list-style-image', 'url(images/isselected_spksj.jpg)');
$(
this).find('img').attr('src','images/closeFile.gif');
});
for(var k=0;k<arr[1].length;k++)
{
arr[
1][k]=arr[1][k+1];
}
arr[
1].length=arr[1].length-1;
break;
}


}

}
}
}
);


/*********************************************************************************/

/*向数据库中添加节点*/
$(
function (){
$(
'#button').bind('click',function (event){

id
=n;
var father=document.getElementById(id);
var childul=document.createElement('ul');
var childli=document.createElement('li');
var img=document.createElement('img');
$(img).attr(
'src',"images/closeFile.gif");
var check=document.createElement('input');
$(check).attr(
'type','checkbox' );
var txt=document.createTextNode($('#text').val());
childli.appendChild(img);
childli.appendChild(check);
childli.appendChild(txt);
childul.appendChild(childli);
father.appendChild(childul);
var nodename=$('#text').val().toString();
var nodelevel=id+1;
var fathernode=id;
var isleave=0;
var conn = new ActiveXObject("ADODB.Connection");
conn.Open(
"Provider=SQLOLEDB.1;Server=.\\SQLEXPRESS;User ID=sa; "+"Password=111; Initial Catalog=TreeView");
var rs = new ActiveXObject("ADODB.Recordset");
var sql='insert into nodes values('+"'"+nodename+"'"+','+nodelevel+','+fathernode+','+isleave+')';
rs.open(sql, conn);
alert(
'成功');
rs.close();
rs
= null;
conn.close();
conn
= null;
});

});


收获园豆:20
左手年华 | 菜鸟二级 |园豆:338 | 2011-05-25 14:48
其他回答(1)
0

也给发我一份学习吧。bihai151@sina.com

VincentZhu | 园豆:166 (初学一级) | 2012-04-06 11:15

http://download.csdn.net/detail/jk186/3303797 这里有我的代码 可以参考下

支持(0) 反对(0) 蒋坤 | 园豆:152 (初学一级) | 2012-04-13 11:42
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册