为jquery-easyui 树添加,删除,修改树的节点

原创 2012年03月23日 16:37:42

为jquery-easyui 树添加,删除,修改树的节点,可能有人会说操作完成以后刷新一下不就可以了吗。这种做法是可以,但是如果你的数据有很多,超过几万条。操作完成后在刷新会很慢,效率不高。我们这里要讨论如何在不刷新的情况下外树添加,修改,删除节点。

首先在主页面添加几个方法:

   function removeRole(){
			var node = $("#tt22").tree("getSelected");
			$('#tt22').tree('remove', node.target);
		}
				
		function appendRole(leafText) {
			var root = $("#tt22").tree('getRoot');
		    $("#tt22").tree("append",{
		        parent: root.target,
		        data:     [{
		            "text":leafText
		        }]
			});
		}

		function updateRole(nodeText) {
			var node = $("#tt22").tree("getSelected");
			if(node) {
				node.text = nodeText;
				$("#tt22").tree("update", node);
			}
		}		


然后在操作的时候,比如我添加一个角色,在action中添加三个变量: name:角色名称 operate:对应的操作 role_id:角色Id

		request.setAttribute("roleName", roleName);
	         request.setAttribute("operate", operate);
		request.setAttribute("role_id", role_id);


 

然后在角色页面调用主页面定义的三个方法即可:

$(function() {
		var upd_flg = "${upd_flg}";
		var add_role_id = "${add_role_id}";
		var add_role_name = "${add_role_name}";
		if((upd_flg == null) || (upd_flg == "")) {
			return;
		}
		var leafText = "<a href=\"<%=path%>/admin/roleListOnload.do?role_id=";
		leafText = leafText + add_role_id;
		leafText = leafText + "\"";
		leafText = leafText + " target=\"content_frame\">";
		leafText = leafText + add_role_name;
		leafText = leafText + "</a>";
		if(upd_flg == "1") {
			//新增
			self.parent.appendRole(leafText);
			return;
		}
		if(upd_flg == "2") {
			//修改
			self.parent.updateRole(leafText);
			return;
		}
		if(upd_flg=="3"){
		//删除
		self.parent.removeRole();
			return;
		}		
	});	


 

在easyui树节点中添加自定义属性

项目里需要用一个左侧的导航树,点击树节点在tabs里添加tab,以前用过ExtJs,从树节点node里可以通过node.attributes.xxx获取自己添加的属性,但是现在用的easyui不行啊,...
  • tsingheng
  • tsingheng
  • 2013年04月23日 23:22
  • 6281

jquery-easyui中添加树节点

jquery-easyui中的树具备基本的CRUD能力,添加节点主要通过append方法实现。比如,通过以下代码建立一颗食品树: Html代码 div style="width:200px;heigh...
  • gulijiang2008
  • gulijiang2008
  • 2010年03月15日 12:03
  • 8793

EasyUI tree菜单添加、删除、保存

效果图: html代码: /easyui/themes/default/easyui.css"> /easyui/themes/icon.css"> /ea...
  • shi_longyan
  • shi_longyan
  • 2015年10月23日 15:21
  • 3646

Easyui Tree对节点进行,添加,修改,删除操作

$(function(){ $("#contentCategory").tree({ url : '/content/category/list', anim...
  • Easzz
  • Easzz
  • 2016年12月13日 14:36
  • 75958

EasyUI 增删改查完全详细

本实例使用EasyUI编写,涵盖eaui的各种元素的创建,验证限制,事件,ajax等
  • c657826604
  • c657826604
  • 2016年04月22日 09:52
  • 11015

easyUI tree 的实现

利用easyUI tree 实现 树形结构菜单 1  easyUI tree 的相关介绍  (API)     http://blog.163.com/wwwsdh870680601@126/blog...
  • qq_23191147
  • qq_23191147
  • 2016年03月23日 16:40
  • 1166

Easyui tree 从数据库中动态加载数据

主要实现easyui tree的功能,能够加载数据库中的数据组装成tree格式
  • chenqk_123
  • chenqk_123
  • 2015年02月28日 11:42
  • 9308

jQuery EasyUI treegrid 增删改查 - 3

jQuery EasyUI treegrid 增删改查
  • flash8627
  • flash8627
  • 2013年07月10日 11:02
  • 9357

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

Tree - jQuery EasyUI Demo $(function(){ var oldnodename =""; $('#tree').tree({ ...
  • shfei10100
  • shfei10100
  • 2014年01月14日 22:13
  • 6593

zTree实现节点修改的实时刷新

一、应用场景 在实际应用中会遇到动态操作树各节点的需求,在增加树节点后如何实时动态刷新树就十分有必要了。 二、项目实践 比如要在test1234节点下新建子节点,首先要选中test1234节点...
  • biedazhangshu
  • biedazhangshu
  • 2016年02月24日 17:09
  • 21557
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:为jquery-easyui 树添加,删除,修改树的节点
举报原因:
原因补充:

(最多只允许输入30个字)