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

推荐订阅源

G
Google Developers Blog
Cisco Talos Blog
Cisco Talos Blog
Y
Y Combinator Blog
罗磊的独立博客
Stack Overflow Blog
Stack Overflow Blog
MongoDB | Blog
MongoDB | Blog
GbyAI
GbyAI
The GitHub Blog
The GitHub Blog
S
SegmentFault 最新的问题
J
Java Code Geeks
C
CXSECURITY Database RSS Feed - CXSecurity.com
cs.AI updates on arXiv.org
cs.AI updates on arXiv.org
博客园 - 聂微东
B
Blog RSS Feed
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
P
Privacy & Cybersecurity Law Blog
L
LangChain Blog
L
LINUX DO - 热门话题
Hugging Face - Blog
Hugging Face - Blog
CTFtime.org: upcoming CTF events
CTFtime.org: upcoming CTF events
P
Privacy International News Feed
F
Full Disclosure
S
Schneier on Security
T
Tenable Blog
量子位
NISL@THU
NISL@THU
Latest news
Latest news
V
Visual Studio Blog
C
Check Point Blog
aimingoo的专栏
aimingoo的专栏
博客园_首页
K
Kaspersky official blog
L
Lohrmann on Cybersecurity
美团技术团队
P
Proofpoint News Feed
P
Palo Alto Networks Blog
Spread Privacy
Spread Privacy
cs.CL updates on arXiv.org
cs.CL updates on arXiv.org
Vercel News
Vercel News
人人都是产品经理
人人都是产品经理
The Hacker News
The Hacker News
AWS News Blog
AWS News Blog
S
Securelist
The Register - Security
The Register - Security
G
GRAHAM CLULEY
Project Zero
Project Zero
T
The Blog of Author Tim Ferriss
Recent Announcements
Recent Announcements
Engineering at Meta
Engineering at Meta
C
Cisco Blogs

博客园 - 天天无用

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方法把要添加的节点的文本和父节点的值传到后台,处理后返回的是新添加的节点的值,这个看实例中后台代码就可以明白。