本帖子已过去太久远了，不再提供回复功能。easyui tree动态从一棵树添加节点到另外所选一棵树中
　　　双击easyui一棵树（源树）的节点，然后将此节点的信息动态添加到另外一棵树（目标树）中，如果目标树选择了节点，则添加到目标树选择节点下作为子节点，双击目标树时动态删除此节点及其下的子节点。
　　easyui版本为jquery-easyui-1.3.1，其他版本自行查看api修改对应代码。
　　源代码如下
&!DOCTYPE html&
&meta http-equiv=&Content-Type& content=&text/ charset=UTF-8&&
&title&easyui tree动态从一棵树添加节点到另外所选一棵树中&/title&
&link rel=&stylesheet& type=&text/css& href=&../themes/default/easyui.css&&
&link rel=&stylesheet& type=&text/css& href=&../themes/icon.css&&
&link rel=&stylesheet& type=&text/css& href=&demo.css&&
&script type=&text/javascript& src=&../jquery-1.8.0.min.js&&&/script&
&script type=&text/javascript& src=&../jquery.easyui.min.js&&&/script&
&script type=&text/javascript&&
window.onload = function () {
$('#treeSource').tree({
onDblClick: function (node) {
var selected = $('#treeTarget').tree('getSelected');
$('#treeTarget').tree('append', {
parent: selected ? selected.target : null,
text: node.text
$('#treeTarget').tree({
onDblClick: function (node) {
$('#treeTarget').tree('remove',node.target);
&ul id=&treeSource&&
&span&Folder&/span&
&li data-options=&state:'closed'&&
&span&Sub Folder 1&/span&
&span&&a href=&#&&File 11&/a&&/span&
&span&File 12&/span&
&span&File 13&/span&
&span&File 2&/span&
&span&File 3&/span&
&li&File 4&/li&
&li&File 5&/li&
&span&File21&/span&
&br /&目标树&br /&
&ul id=&treeTarget&&&/ul&
原创文章，转载请注明出处：
阅读(409)喜欢(0)不喜欢(0)分类：
上一篇：下一篇：Jquery EasyUI中treegrid的中右键菜单和一般按钮同时绑定事件时的怪异事件
我的图书馆
Jquery EasyUI中treegrid的中右键菜单和一般按钮同时绑定事件时的怪异事件
做个项目使用jquery easyui来做前端，也许是对此不是很熟悉，总是发现一些不可理解的事件。
主要源代码如下：
&script type="text/javascript"&
$(function(){
var access_editingId; //当前正在编辑的
var access_lastChildN
var access_addclick=0; //点击了添加
$('#access_tg').treegrid({
onContextMenu:function(e,row){
e.preventDefault();
//该方法将通知 Web 浏览器不要执行与事件关联的默认动作（如果存在这样的动作）
$('#access_tg').treegrid('select',row.id);
$('#access_menu').menu('show',{
left: e.pageX,
top: e.pageY
$("#access_lb_new,#access_menu_new").click(function(){
access_new();
function access_new(){
var tt=$('#access_tg');
var row = tt.treegrid('getSelected');
//获取选中的标签项
tt.treegrid('reload',row.id); //reload为异步操作，如果直接读取子节点会无内容
&div class="container"&
&div id="access_menu" class="easyui-menu" style="width:100"&
&div id='access_menu_edit'&编辑本节点&/div&
&div id='access_menu_del'&删除本条目&/div&
&div id='access_menu_refresh'&刷新节点&/div&
&div id='access_menu_new'&新增子节点&/div&
&table id="access_tg" title="权限分配" class="easyui-treegrid" style="height:500px"
url="/Admin/Access/treegrid"
toolbar="#access_toolbar"
rownumbers="true"
idField="id" treeField="description"&
&th field="id" width="40"&ID&/th&
&th field="description" width="200" editor='text'&描述&/th&
&th field="name" width="50"&名称&/th&
&th field="action" width="200" editor='text'&动作&/th&
&th field="role" width="200" editor='text'&角色&/th&
&th field="state" width="200" editor='text'&状态&/th&
&th field="parentid" width="200" editor='text'&父层&/th&
&div style="height:5px"&&/div&
&div id="access_toolbar" &
&a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" id="access_lb_new"&
显示界面如下：
1、点击几次权限分配按钮，可以打开“权限分配”页面，然后点击关闭，再次打开。
2、在第一条上右键菜单，点击“新增子节点”，然后树形结构变成了如下图，发现树形结构的子节点重复出现了多次。
3、关闭权限分配按钮，点击上面的“+”形图标，树形结构展开，可以发现子节点完全是正常的。
4、从源代码可以看到，点击“新增子节点”与点击上面的“+”形图标绑定的事件是相同的，但是出来的结果却不一样。
$("#access_lb_new,#access_menu_new").click(function(){
access_new();
5、查看发送系统执行的日志可以发现，第一次右键菜单的时候发送了多次获得子节点的请求。
6、将两个按钮的事件绑定代码分开写，如下，重复操作以上动作，发现结果就完全正常了，没有出现多个请求与子节点重复的情况。
$("#access_lb_new").click(function(){
access_new();
$("#access_menu_new").click(function(){
access_new();
7、同时，我尝试了以第4点同样的方式绑定两个一般按钮（非右键弹出菜单），也不会出现子节点重复出现的问题。由此可见,只有在treegrid使用右键弹出菜单，并且将右键菜单的事件同时绑定在另外一个按钮上的时候，才会出现这种奇怪的现象。
TA的推荐TA的最新馆藏Jquery easyui Tree的简单使用 - 王朝网络 -
分享&&&&&当前位置: &&&&&&&&Jquery easyui Tree的简单使用&&&　　Jquery easyui Tree的简单使用Jquery easyui Tree的简单使用 　　Jquery easyui 是jQuery EasyUI是一组基于jQuery的UI插件集合，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对CSS样式有深入的了解，开发者需要了解的只有一些简单的html标签。 　　Jquery easyui 官网：/ ，中文网站：http://www.jeasyui.net/，jquery easyui 下载地址：/download/index.php　　在项目中有时需要页面设计，不巧美工前端人员比较忙或者其他原因，造成敲代码的程序猿不得不进行ui设计，此时可以尝试easyui。 　　进入正题，本文分两部分介绍easyui中tree的使用：　　首先我们需要引用两个文件一个是 主题样式css文件，一个是easyui核心js文件（easyui依赖jquery，如果没有引用，需要添加引用）　　在想要生成tree的ul加上class "easyui-tree"　　1.静态数据Tree，结构确定，数据是确定的，数据直接在html写死的 　　2.动态数据Tree，结构不确定，动态数据，数据需要从服务器端获取 　　静态数据Tree 静态数据tree代码示例： 　　&ul class="easyui-tree" id="nav_ul"&
&li&&a href="default.aspx"&信息管理&/a& &/li&
&li&&a href='columnManage.aspx'&栏目管理&/a&&/li&
&li&&a href="ContentManage.aspx"&内容管理&/a&&/li&
&li&&a href="RecycleContent.aspx"&内容回收站&/a&&/li&
&li&&span&资源管理&/span&
&li&&a href="ResourceManage-0.aspx"&CSS管理&/a&&/li&
&li&&a href="ResourceManage-1.aspx"&JS管理&/a&&/li&
&li&&span&模板管理&/span&
&li&&a href="ResourceManage-2.aspx"&内容页模板管理&/a&&/li&
&li&&a href="ResourceManage-3.aspx"&栏目页模板管理&/a&&/li&
&/ul&　　在浏览器中的效果：，可以根据自己想要实现的样式，进行样式的调整，建议加页面内联样式或行内样式，不要直接修改easyui的css文件　　动态数据Tree 动态数据tree前台html代码示例：　　&ul id="tt" class="easyui-tree" data-options="url:'/Handlers/getTypesNodeHandler.ashx'"&&/ul&　　url代表的是从服务器端获取tree的数据的处理程序路径　　经过使用 Fiddle调试可以发现每次请求时，请求参数为&id&，值为选择节点的id　　服务器端处理程序getTypesNodeHandler.ashx示例代码：　　移除tree当前选择项，当选中tree的某个节点时，对应节点会多一个class为&tree-node-selected &的样式，将这个样式去掉就可以移除选择的tree的选项　　$(".tree-node-selected").removeClass("tree-node-selected");　　1 using S 2
3 namespace Models.FormatModel 4 { 5
public class TreeModel 6
//节点id 8
public int id { } 9 10
//节点显示的文本11
public string text { }12 13
//open 、closed14
public string state { get { return "closed"; } }15
}16 }　　TreeModel 1 using S 2 using System.Collections.G 3 using System.L 4 using System.W 5
6 namespace Webapplication1.Handlers 7 { 8
/// &summary& 9
/// Summary description for getTypesNodeHandler10
/// &/summary&11
public class getTypesNodeHandler : IHttpHandler12
public void PRocessRequest(HttpContext context)15
context.Response.ContentType = "text/plain";17
int parentId = 0;18
int.TryParse(context.Request["id"], out parentId);19
List&Models.Category& types =20
//判断父节点的值23
if (parentId & 0)24
//加载子级菜单26
types = CommonNews.Helper.OperateContext.Current.LoadSecondaryCategory(parentId);27
//加载顶级菜单31
types = CommonNews.Helper.OperateContext.Current.LoadTopCategory();32
//判断是否有值，有值的话先转换为tree模型再转换为json输出，没有值直接输出空字符串34
if (types != null)35
//转换为tree模型37
List&Models.FormatModel.TreeModel& tree = types.Select(t =& new Models.FormatModel.TreeModel() { id = t.CategoryId, text = t.CategoryName }).ToList();38
//转换为json格式数据输出39
context.Response.Write(Common.ConverterHelper.ObjectToJson(tree));40
context.Response.Write("");44
catch (Exception ex)47
new Common.LogHelper(typeof(getTypesNodeHandler)).Error(ex);49
context.Response.Write("error");50
public bool IsReusable54
}61 }　　getTypesNodeHandler&&&&&今日推荐
&&&&&日版宠物情人2017的插曲，很带节奏感，日语的，女生唱的。
最后听见是在第8集的时候女主手割伤了，然后男主用嘴帮她吸了一下，插曲就出来了。
歌手：Def...老钟家的两个儿子很特别，就是跟其他的人不太一样，魔一般的执着。兄弟俩都到了要结婚的年龄了，不管自家老爹怎么磨破嘴皮子，兄弟俩说不娶就不娶，老父母为兄弟两操碎了心...把牛仔裤磨出有线的破洞
1、具体工具就是磨脚石，下面垫一个硬物，然后用磨脚石一直磨一直磨，到把那块磨薄了，用手撕开就好了。出来的洞啊很自然的。需要猫须的话调几...先来看下敬业福和爱国福
今年春节，支付宝再次推出了“五福红包”活动，表示要“把欠大家的敬业福都还给大家”。
今天该活动正式启动，和去年一样，需要收集“五福”...有时候我们打开冰箱就会闻到一股异味，冰箱里的这种异味是因为一些物质发出的气味的混合体，闻起来让人恶心。 产生这些异味的主要原因有以下几点。
1、很多人有这种习...简介
《极品家丁》讲述了现代白领林晚荣无意回到古代金陵，并追随萧二小姐化名“林三”进入萧府，不料却阴差阳错上演了一出低级家丁拼搏上位的“林三升职记”。...你就是我最爱的宝宝 - 李溪芮
(电视剧《极品家丁》片尾曲)
作词：常馨内
作曲：常馨内
你的眉 又鬼马的挑
你的嘴 又坏坏的笑
上一秒吵闹 下...乌梅，又称春梅，中医认为，乌梅味酸，性温，无毒，具有安心、除热、下气、祛痰、止渴调中、杀虫的功效，治肢体痛、肺痨病。乌梅泡水喝能治伤寒烦热、止吐泻，与干姜一起制...什么是脂肪粒
在我们的脸上总会长一个个像脂肪的小颗粒，弄也弄不掉，而且颜色还是白白的。它既不是粉刺也不是其他的任何痘痘，它就是脂肪粒。
脂肪粒虽然也是由油脂...来源：中国青年报
新的攻击方法不断涌现，黑客几乎永远占据网络攻击的上风，我们不可能通过技术手段杜绝网络攻击。国家安全保障的主要方向是打击犯罪，而不是处置和惩罚...夫妻网络直播“造人”爆红
　　1月9日，温岭城北派出所接到南京警方的协查通告，他们近期打掉了一个涉黄直播APP平台。而根据掌握的线索，其中有一对涉案的夫妻主播...如何防止墙纸老化？
（1）选择透气性好的墙纸
市场上墙纸的材质分无纺布的、木纤维的、PVC的、玻璃纤维基材的、布面的等，相对而言，PVC材质的墙纸最不透气...观点一：破日本销售量的“鲜肌之谜” 非日本生产
近一段时间，淘宝上架了一款名为“鲜肌之谜的” 鲑鱼卵巢美容液，号称是最近日本的一款推出的全新护肤品，产品本身所...系腰裙(北宋词人 张先)
惜霜蟾照夜云天，朦胧影、画勾阑。人情纵似长情月，算一年年。又能得、几番圆。
欲寄西江题叶字，流不到、五亭前。东池始有荷新绿，尚小如...关于女人的经典语句1、【做一个独立的女人】
思想独立：有主见、有自己的人生观、价值观。有上进心,永远不放弃自己的理想，做一份自己喜爱的事业，拥有快乐和成就...你想体验机器人性爱吗？你想和性爱机器人结婚吗？如果你想，机器人有拒绝你的权利吗？
近日，第二届“国际人类-机器人性爱研讨会”大会在伦敦金史密斯大学落下帷幕。而...10.土耳其地下洞穴城市
变态指数：★★☆☆☆
这是土耳其卡帕多西亚的一个著名景点，传说是当年基督教徒们为了躲避战争而在此修建。里面曾住着20000人，......据英国《每日快报》报道，一位科学家兼理论家Robert Lanza博士宣称，世界上并不存在人类死亡，死亡的只是身体。他认为我们的意识借助我们体内的能量生存，而且...《我爱狐狸精》 - 刘馨棋
　　(电视剧《屏里狐》主题曲)
　　作词：金十三&李旦
　　作曲：刘嘉
　　狐狸精 狐狸仙
　　千年修...·&·&·&&&&&&Jquery easyui Tree的简单使用Jquery easyui Tree的简单使用
Jquery easyui 是jQuery EasyUI是一组基于jQuery的UI插件集合，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对CSS样式有深入的了解，开发者需要了解的只有一些简单的html标签。
Jquery easyui 官网：/ ，中文网站：http://www.jeasyui.net/，jquery easyui 下载地址：/download/index.php
在项目中有时需要页面设计，不巧美工前端人员比较忙或者其他原因，造成敲代码的程序猿不得不进行ui设计，此时可以尝试easyui。
进入正题，本文分两部分介绍easyui中tree的使用：
　　首先我们需要引用两个文件一个是 主题样式css文件，一个是easyui核心js文件（easyui依赖jquery，如果没有引用，需要添加引用）
　　在想要生成tree的ul加上class "easyui-tree"
1.静态数据Tree，结构确定，数据是确定的，数据直接在html写死的
2.动态数据Tree，结构不确定，动态数据，数据需要从服务器端获取
静态数据Tree 静态数据tree代码示例：
&ul class="easyui-tree" id="nav_ul"&
&li&&a href="default.aspx"&信息管理&/a& &/li&
&li&&a href='columnManage.aspx'&栏目管理&/a&&/li&
&li&&a href="ContentManage.aspx"&内容管理&/a&&/li&
&li&&a href="RecycleContent.aspx"&内容回收站&/a&&/li&
&li&&span&资源管理&/span&
&li&&a href="ResourceManage-0.aspx"&CSS管理&/a&&/li&
&li&&a href="ResourceManage-1.aspx"&JS管理&/a&&/li&
&li&&span&模板管理&/span&
&li&&a href="ResourceManage-2.aspx"&内容页模板管理&/a&&/li&
&li&&a href="ResourceManage-3.aspx"&栏目页模板管理&/a&&/li&
在浏览器中的效果：，可以根据自己想要实现的样式，进行样式的调整，建议加页面内联样式或行内样式，不要直接修改easyui的css文件
动态数据Tree 动态数据tree前台html代码示例：
&ul id="tt" class="easyui-tree" data-options="url:'/Handlers/getTypesNodeHandler.ashx'"&&/ul&
url代表的是从服务器端获取tree的数据的处理程序路径
　　经过使用 Fiddle调试可以发现每次请求时，请求参数为&id&，值为选择节点的id
服务器端处理程序getTypesNodeHandler.ashx示例代码：　　　　
移除tree当前选择项，当选中tree的某个节点时，对应节点会多一个class为&tree-node-selected &的样式，将这个样式去掉就可以移除选择的tree的选项
$(".tree-node-selected").removeClass("tree-node-selected");
1 using S 2
3 namespace Models.FormatModel 4 { 5
public class TreeModel 6
//节点id 8
public int id { } 9 10
//节点显示的文本11
public string text { }12 13
//open 、closed14
public string state { get { return "closed"; } }15
TreeModel 1 using S 2 using System.Collections.G 3 using System.L 4 using System.W 5
6 namespace Webapplication1.Handlers 7 { 8
/// &summary& 9
/// Summary description for getTypesNodeHandler10
/// &/summary&11
public class getTypesNodeHandler : IHttpHandler12
public void PRocessRequest(HttpContext context)15
context.Response.ContentType = "text/plain";17
int parentId = 0;18
int.TryParse(context.Request["id"], out parentId);19
List&Models.Category& types =20
//判断父节点的值23
if (parentId & 0)24
//加载子级菜单26
types = CommonNews.Helper.OperateContext.Current.LoadSecondaryCategory(parentId);27
//加载顶级菜单31
types = CommonNews.Helper.OperateContext.Current.LoadTopCategory();32
//判断是否有值，有值的话先转换为tree模型再转换为json输出，没有值直接输出空字符串34
if (types != null)35
//转换为tree模型37
List&Models.FormatModel.TreeModel& tree = types.Select(t =& new Models.FormatModel.TreeModel() { id = t.CategoryId, text = t.CategoryName }).ToList();38
//转换为json格式数据输出39
context.Response.Write(Common.ConverterHelper.ObjectToJson(tree));40
context.Response.Write("");44
catch (Exception ex)47
new Common.LogHelper(typeof(getTypesNodeHandler)).Error(ex);49
context.Response.Write("error");50
public bool IsReusable54
getTypesNodeHandler&&&&&　　免责声明：本文仅代表作者个人观点，与王朝网络无关。王朝网络登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述，其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。&&&&&&为你推荐&&&&&&转载本文&UBB代码&HTML代码复制到剪贴板...&更多内容··········&&&&&&&&&频道精选&&&王朝女性&&|&&|&&|&&|&&|&&|&&|&&|&&|&&|&&|&&|&王朝分栏&&|&&|&&|&&|&&|&&|&&|&&|&&|&&|&王朝编程&&|&&|&&|&&|&&|&&|&&|&&|&&|&&|&王朝导购&&|&&|&&|&&|&&|&&|&&|&&|&&|&&|&王朝其他&&|&&|&&|&&|&&|&&|&&&&2005-&&版权所有&