如何使用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里呢？
}
}
各位大虾，求源码！小弟先谢啦！
最佳答案
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
其他回答(1)
0
