找了一个jQuery的树形插件，自己添加了增、删、改、查，与数据库交互(SQL Server 2005)。
支持3层节点，要扩展也可以，并不完善，欢迎提出意见
截图：
客户端主要代码：
<div id="divMove">
<input id="btnAdd" type="button" value="添加" /><input id="btnDel" type="button" value="删除" /></div>
<div id="divTree">
<ul id="red" class="treeview-red">
</ul>
</div>
以后变更的树形内容都在ul下面。
主要的js文件代码：
//--Author:Vincent
$(document).ready(function(){
//bulid xmlHttpRequest
var xmlHttp;
var oClick;//which mouse up
if(window.ActiveXObject)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest)
{
xmlHttp=new XMLHttpRequest();
}
var post="op=2";//bind data from database
var url=document.location.href;
xmlHttp.open("POST",url,true);
xmlHttp.onreadystatechange=callback;
xmlHttp.setRequestHeader("Content-Length",post.length);
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttp.send(post);
//add
$("#btnAdd").click(function(event){
// var oUL=document.getElementById("red");
// var oLI=document.createElement("li");
// var oInput=document.createElement("input");
//
// oInput.setAttribute("class","treenode");
// oInput.setAttribute("value","New Node");
// oInput.setAttribute("type","text");
//
// oLI.appendChild(oInput);
// oUL.appendChild(oLI);
var oNode=oClick;
var array=new Array();
for(var i=0;i<document.childNodes.length;i++)
{
if(oNode.parentNode.parentNode.parentNode.tagName=="LI")
{
var oo=oNode.parentNode.parentNode.parentNode.childNodes[1].value;
array[i]=oo;
oNode=oNode.parentNode.parentNode;
}
else
break;
}
if(array.length==0)
{
post="op=1&sort="+oClick.value+"|NewNode1.0|NewNode1.0.0";
}
else if(array.length==1)
{
post="op=1&sort="+array[0]+"|"+oClick.value+"|NewNode1.0.0";
}
else if(array.length==2)
{
post="op=1&sort="+array[1]+"|"+array[0]+"|NewNode1.0.0";
}
//post="op=1&sort=NewNode1.0|NewNode1|NewNode1.0.0";//add new data
xmlHttp.open("POST",url,true);
xmlHttp.onreadystatechange=callback;
xmlHttp.setRequestHeader("Content-Length",post.length);
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttp.send(post);
});
//delete
$("#btnDel").click(function(event){
if(confirm('Are you sure to clear or delete?'))
{
var oNode=oClick;
var array=new Array();
for(var i=0;i<document.childNodes.length;i++)
{
if(oNode.parentNode.parentNode.parentNode.tagName=="LI")
{
var oo=oNode.parentNode.parentNode.parentNode.childNodes[1].value;
array[i]=oo;
oNode=oNode.parentNode.parentNode;
}
else
break;
}
post="op=4&sort=";
for(var i=0;i<array.length;i++)
{
post+=array[i]+"|";
if(i==array.length-1)
{
post=post.substring(0,post.length-1)+"|"+oClick.value;
}
}
if(array.length==0)
{
alert('Can not to be deleted!');
return;
}
xmlHttp.open("POST",url,true);
xmlHttp.onreadystatechange=callback;
xmlHttp.setRequestHeader("Content-Length",post.length);
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttp.send(post);
}
});
//web visit callback
function callback()
{
if(xmlHttp.readystate==4)
{
if(xmlHttp.status==200)
{
display();
}
else
{
alert("Server Back Status:"+xmlHttp.statusText);
}
}
else//status is not success
{
document.getElementById("red").innerHTML="Data Loading";
}
}
function display()
{
var index=xmlHttp.responseText.indexOf("<!DOCTYPE");
var html=xmlHttp.responseText.substring(0,index);
document.getElementById("red").innerHTML=html;
reset();
}
function reset()
{
$("#red").treeview({
animated: "fast",
collapsed: true,
unique: true,
persist: "cookie",
toggle: function() {
window.console && console.log("%o was toggled", this);
}
});
//double click textbox
$("#divTree input").dblclick(function(event){
$(this).addClass("focus");
var oDiv=document.getElementById("divMove");
oDiv.style.display="none";
});
//textbox mouseout
$("#divTree input").mouseout(function(event){
$(this).removeClass("focus");
});
//textbox enter
$("#divTree input").keydown(function(event){
if(event.keyCode==13)
{
$(this).removeClass("focus");
var oNode=this;
var array=new Array();
for(var i=0;i<document.childNodes.length;i++)
{
if(oNode.parentNode.parentNode.parentNode.tagName=="LI")
{
var oo=oNode.parentNode.parentNode.parentNode.childNodes[1].value;
array[i]=oo;
oNode=oNode.parentNode.parentNode;
}
else
break;
}
post="op=3&sort=";
for(var i=0;i<array.length;i++)
{
post+=array[i]+"|";
if(i==array.length-1)
{
post=post.substring(0,post.length-1)+"|"+this.value+"|"+this.defaultValue;
}
}
if(array.length==0) post+=this.value+"|"+this.defaultValue;
xmlHttp.open("POST",url,true);
xmlHttp.onreadystatechange=callback;
xmlHttp.setRequestHeader("Content-Length",post.length);
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttp.send(post);
}
});
$(".treenode").mouseup(function(event){
var oDiv=document.getElementById("divMove");
oDiv.style.left=event.clientX;
oDiv.style.top=event.clientY;
oDiv.style.display="block";
oClick=$(this).get(0);
//alert(event.clientY+" "+event.clientX);
});
$("#divTree").mouseover(function(event){
var oDiv=document.getElementById("divMove");
oDiv.style.display="none";
});
}
});