<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Tree - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script type="text/javascript">
$(function(){
var oldnodename ="";
$(‘#tree‘).tree({
url: ‘tree_data.json‘,
onLoadSuccess:function(node,data) {
},
onClick:function(node){
var id = node.id;
var text = node.text;
alert(id+‘ll‘+text);
},onContextMenu:function(e, node){
e.preventDefault();
var id = node.id;
var rightbuttonobj = $(‘#rightclickdiv‘);
rightbuttonobj.menu(‘show‘, {
left: e.pageX,
top: e.pageY
});
rightbuttonobj.menu({
onClick:function(item){
if( item.name == ‘001‘ ){
var nodeid = appendnode(node);
var newnode = $(‘#tree‘).tree(‘find‘,nodeid);
$(‘#tree‘).tree(‘beginEdit‘,newnode.target);
setCursorPos(nodeid);
}else if( item.name == ‘002‘ ){
oldnodename = node.text;
$(‘#tree‘).tree(‘beginEdit‘,node.target);
var nodeid=node.id;
setCursorPos(nodeid);
}else if(item.name == ‘003‘ ){
$(‘#tree‘).tree(‘remove‘, node.target);
}
}
});
},onAfterEdit:function(node){
$(‘#tree‘).tree(‘update‘,node);
},onCancelEdit:function(node){
//alert("onCancelEdit---");
}
});
});
//新增和修改结点名称时自动全选结点名称
var setCursorPos = function(nodeid){
var parnote=$("div[node-id=‘"+nodeid+"‘]");
var titlespannote=$(parnote).children(".tree-title");
var titleinput= $(titlespannote).children("input");
var e1=titleinput[0];
e1.select();
}
function appendnode(node){
var nodeid = node.id;
var newid = nodeid+"qqq";
$(‘#tree‘).tree(‘append‘,{
parent: (node?node.target:null),
data:[{
id:newid,
text:‘newnode‘,
checked:true
}]
});
return newid;
}
</script>
</head>
<body>
<div>
<ul id="tree" class="easyui-tree" animate="false">
</ul>
</div>
<div id="rightclickdiv" class="easyui-menu" style="width: 115px;">
<div data-options="iconCls:‘icon-add‘,name:‘001‘">append</div>
<div data-options="iconCls:‘icon-edit‘,name:‘002‘">update</div>
<div data-options="iconCls:‘icon-remove‘,name:‘003‘">remove</div>
</div>
</body>
</html>