jQuery EasyUI Tree 增删改编辑结点名称自动全选文本域

最新推荐文章于 2019-03-26 15:32:59 发布

Fay_Q

最新推荐文章于 2019-03-26 15:32:59 发布

阅读量8.2k

点赞数 1

分类专栏： EasyUI 文章标签： easyui tree 编辑结点全选文本

本文链接：https://blog.csdn.net/o_darling/article/details/18226719

版权

EasyUI 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!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>

Fay_Q

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery EasyUI Tree 增删改编辑结点名称自动全选文本域

Tree - jQuery EasyUI Demo $(function(){ var oldnodename =""; $('#tree').tree({ url: 'tree_data.json', onLoadSuccess:function(node,data) { }, onClick:function(node
复制链接

扫一扫