惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
L
LangChain Blog
雷峰网
雷峰网
罗磊的独立博客
Hugging Face - Blog
Hugging Face - Blog
T
Tailwind CSS Blog
V
Visual Studio Blog
博客园_首页
Apple Machine Learning Research
Apple Machine Learning Research
Last Week in AI
Last Week in AI
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
博客园 - 司徒正美
有赞技术团队
有赞技术团队
J
Java Code Geeks
酷 壳 – CoolShell
酷 壳 – CoolShell
大猫的无限游戏
大猫的无限游戏
Engineering at Meta
Engineering at Meta
B
Blog
Recent Announcements
Recent Announcements
C
Check Point Blog
MongoDB | Blog
MongoDB | Blog
GbyAI
GbyAI
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
F
Full Disclosure
Microsoft Security Blog
Microsoft Security Blog
N
Netflix TechBlog - Medium
I
InfoQ
云风的 BLOG
云风的 BLOG
量子位
D
Docker
D
DataBreaches.Net
Vercel News
Vercel News
Blog — PlanetScale
Blog — PlanetScale
宝玉的分享
宝玉的分享
V
V2EX
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
Y
Y Combinator Blog
美团技术团队
小众软件
小众软件
阮一峰的网络日志
阮一峰的网络日志
博客园 - 聂微东
B
Blog RSS Feed
MyScale Blog
MyScale Blog
月光博客
月光博客
T
The Blog of Author Tim Ferriss
WordPress大学
WordPress大学
aimingoo的专栏
aimingoo的专栏
M
MIT News - Artificial intelligence
U
Unit 42
Google DeepMind News
Google DeepMind News

博客园 - 天天无用

jsonp原理实例及mvc中的应用 ubuntu笔记 修复MVC3中使用Remote验证的一点小问题 诺基亚手机S60系统证书申请、软件签名图文教程 JAXER留言板-一个html页面的ajax留言版 - 天天无用 - 博客园 初探JAXER Jquery插件研究:Ajax File Upload 本月wii游戏太多,感觉有点堕落 使用jQuery加DIV实现可以动态添加的金字塔结构 自制的操作下拉列表框(SELECT)的三个jquery插件(ajax填充、联动、增加选项) - 天天无用 - 博客园 用jQuery实现.net 2.0 treeview客户端无刷新操作的实例 基于jQuery的AJAX和JSON实现纯html数据模板 自己写的DataTable转换成JSON字符串的函数 自己写的jQuery自动完成的插件(AutoComplete) asp.net treeview控件无刷新选择和删除节点(使用jquery) - 天天无用 - 博客园 纵向合并gridview单元格的两种方法 .net下两种json序列化速度比对 asp.net 2.0 中 TreeView控件中的checkbox客户端操作 asp.net 2.0中根据roles显示不同的sitemap - 天天无用 - 博客园
Asp.net 2.0 TreeView控件使用jQuery无刷新添加节点详细说明
天天无用 · 2007-11-14 · via 博客园 - 天天无用

    TreeView控件生成的html结构已经在上一篇中说明,这里再简单说一下,一个节点就是在一个table里面的span标签,这个span所在的td的前一个td放的是节点的缩进,一个div标签,是第几层节点有几个这样的td。另外还有一个图片,就是控制节点展开和收缩的加减号,如果节点有子节点的话,就要有这个图片。详细看下面的代码。

     三个变量newNodeTemplete定义了一个节点的table,indent定义了一个缩进用的td,还有一个toggle就是控制展开和收缩用的图片。变量中$..$这个形式都是为了替换具体节点的内容。

     注意这里table中的这里“<td><img src='+TreeView1_Data.images[3]+' alt="" /></td>”这个是节点前的一个图片,TreeView1_Data.images[3]是TreeView控件自己定义的图片,其实就是一个空白图片,但是如果这个节点有子节点的时候,这个img就要用toggle定义的html代码来替换。

     另外还有这里“onclick=SelectNode(this)”,这个是选择节点的方法,但是这个在treeview生成的html代码里是没有的,但是在这里必须要有,因为jQuery无法为用代码添加的html节点添加事件,这里就简单一点直接加上这个事件。用ajax方法添加上节点之后,刷新页面后就没有这个属性了。

下面看一下添加节点的代码

    function AddNode(nodeText,nodeValue)
    

        
var id = GetMaxID();//获取最大的节点id
        var num = parseInt(id.split('t')[1]);//获得节点的编号
        var newNode = newNodeTemplete.replace("$nid$",id.split('t')[0+ "t" + (++num));
        newNode 
= newNode.replace("$ntext$",nodeText);
        newNode 
= newNode.replace("$nvalue$",nodeValue);//定义一个新的节点,并替换上实际的节点id,节点文本和节点值
        var subdiv = selectedNode.attr("id").replace("t","n"+ "Nodes";//包含所选节点的子节点用的div的id
        DoExpand();//展开正在操作的节点
        if($("#"+subdiv).text().length>0)//检查所要操作的节点是否有子节点
        {
            $(
"#"+subdiv).append(newNode);//有子节点,把上面定义好的新节点直接添加到div里面
        }

        
else
        
{
            
//没有子节点,需要构造一个div来放置节点
            ndiv = divContainer.replace("$nid$",subdiv);//定义一个新的子节点div
            selectedNode.parents("table").after(ndiv);//把这个div插入到所选节点所在的table的后面
            $("#"+subdiv).html(newNode);//把定义的新节点放到div中
            //下面是将节点前的空白图片替换成控制展开和收缩用的图片
            ntogle = toggle;
            ntogle 
= ntogle.replace("$ndivid$",subdiv); 
            ntogle 
= ntogle.replace("$nid$",subdiv.substring(subdiv.length-5,0));
            ntogle 
= ntogle.replace("$nid$",subdiv.substring(subdiv.length-5,0));
            ntogle 
= ntogle.replace("$idnum$",++num);
            ntogle 
= ntogle.replace("$ntext$",selectedNode.text());                
            selectedNode.parents(
"table").find("td[img]").html(ntogle);
        }
        
        SetIndent(subdiv);
//设置节点的缩进
    }

     以上就是添加节点的代码,需要说明的是节点的id,它与节点的值没有关系,它的形式是“TreeView1t35”这个样子,t前面的TreeView1是TreeView控件的id,t后面的数字是节点的编号,每增加一个节点这个编号就加一。另外selectedNode是一个全局变量,记录这被选中的节点,还有包含子节点的div请看选择和删除节点的文章里面对TreeView生成的html的详细说明。

    还有就是GetMaxID(),DoExpand(),SetIndent(subdiv)这三个函数在实例中都有,代码都比较简单,就不做详细说明了。

    再来看具体的添加操作

     简单说明一下,用jQuery的ajax方法把要添加的节点的文本和父节点的值传到后台,处理后返回的是新添加的节点的值,这个看实例中后台代码就可以明白。