jquery的tree增删改查节点操作

1 首选需要添加jquery的css和js。顺序不能变（注意：有script标签。一定要有</script>结尾。不然会出错）
如：<link rel="stylesheet" type="text/css" href="./common/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="./common/easyui/themes/default/easyui.css">

<script type="text/javascript"  src="./js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="./common/easyui/jquery.easyui.min.js"></script>


2 首先要有初始化tree。通过data数组可以给tree进行初始化,当然必须包括属性id、text 如果有子节点则需要有children
<ul id="tt2"></ul>


然后通过jquery进行tree的初始化
如：jQuery.ready=function(){
$("#tt2").tree({
checkbox:false,
data:[
{ id:'222',
text:'aa',
children:[{id:'111',text:'bb'},{id:'333',text:'ccc'}]
}
],
onContextMenu:function(e,node){

}
});
}


3 设置右键菜单 ，设置一个div的class为easyui-menu然后div中包括几个菜单操作
如：<div id="div_menu" class="easyui-menu" style="width:100px">
    <div onclick="addNode()">添加子节点</div>
    <div onclick="editNode()">修改</div>
    <div onclick="delNode()">删除</div>
    <div onclick="chakanNode()">查看</div>
    </div>


4 将右键菜单赐予给tree。这是需要在tree的onContextMenu函数中进行设置。
如：onContextMenu:function(e,node){//onContextMenu函数设置右键菜单
//alert(e.pageX+"--"+e.pageY); e.pageX为鼠标点击的X轴的坐标 e.pageY为鼠标点击的Y轴的坐标
e.preventDefault();//这是去除网页自带的右键
$("#tt2").tree('select',node.target);//这是设置点击tree节点时选中该节点
$("#div_menu").menu('show',{//设置菜单出现
left:e.pageX,
top:e.pageY

})
}


5 为tree添加节点。通过append即可。添加节点。
如：var node_=$("#tt2").tree("getSelected");
 
  var id_=getUUID();
  text_num=text_num+1;
  var text_="text"+text_num;
 
  $("#tt2").tree("append",{
  parent:node_.target,
  data:[{id:id_,text:text_}]
  })


6 删除该节点。通过remove即可。
如：var node=$("#tt2").tree("getSelected");
  $("#tt2").tree("remove",node.target);


7 修改该节点内容。通过update即可。
如：var node_=$("#tt2").tree("getSelected");
  var text=node_.text;
  var shijian=new Date().getDate();
  text="text"+shijian;
  node_.text=text;
  $("#tt2").tree("update",node_);


8 查看该节点。直接得到该节点。然后通过属性即可。
如：var node=$("#tt2").tree("getSelected");
  alert(node.id+"---"+node.text);


综上所述：添加节点--append方法。删除节点--remove方法。修改节点--update。查看节点--查看属性