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

推荐订阅源

Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
博客园 - 【当耐特】
阮一峰的网络日志
阮一峰的网络日志
S
Secure Thoughts
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
T
Tenable Blog
T
Tailwind CSS Blog
WordPress大学
WordPress大学
宝玉的分享
宝玉的分享
Webroot Blog
Webroot Blog
cs.CL updates on arXiv.org
cs.CL updates on arXiv.org
The Cloudflare Blog
T
Threat Research - Cisco Blogs
V
Visual Studio Blog
Jina AI
Jina AI
V
V2EX
I
InfoQ
Latest news
Latest news
P
Proofpoint News Feed
T
Threatpost
Engineering at Meta
Engineering at Meta
P
Proofpoint News Feed
美团技术团队
The Register - Security
The Register - Security
L
LangChain Blog
Apple Machine Learning Research
Apple Machine Learning Research
aimingoo的专栏
aimingoo的专栏
GbyAI
GbyAI
Cloudbric
Cloudbric
Microsoft Azure Blog
Microsoft Azure Blog
C
Cisco Blogs
U
Unit 42
Microsoft Security Blog
Microsoft Security Blog
MyScale Blog
MyScale Blog
V
Vulnerabilities – Threatpost
TaoSecurity Blog
TaoSecurity Blog
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
Recent Commits to openclaw:main
Recent Commits to openclaw:main
W
WeLiveSecurity
博客园 - 司徒正美
T
The Exploit Database - CXSecurity.com
小众软件
小众软件
Y
Y Combinator Blog
Recent Announcements
Recent Announcements
量子位
酷 壳 – CoolShell
酷 壳 – CoolShell
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
博客园_首页
N
News and Events Feed by Topic

博客园 - 天天无用

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

要想做到treeview在客户端的操作的话,首先要了解treeview生成的html,比如下面一个treeview

它的每一个节点生成的html都是一个table,比如说根节点

可以看到节点的文本是放在一个id为"TreeView1t0"的span里面的,但是从这里不能取得节点的值(这个问题一会儿解决),再来看它的子节点的html。

它的子节点都是放在一个id为"TreeView1n0Nodes"的div里面的,再来看aaa节点的子节点,也是放在"TreeView1n1Nodes",而aaa节点的span的id为"TreeView1t1"。这样整个treeview的html的结构就清楚了。

再说明一点,注意看根节点的html

<td class="TreeView1_1" style="white-space:nowrap;"><span class="TreeView1_0" id="TreeView1t0">根节点</span></td>

主要是class="TreeView1_1",这个是TreeView1_1的样式表是treeview设置了SelectedNodeStyle属性生成的,html代码如下

如果节点被选择的话,节点所在的td的class属性就会被设置为TreeView1_1。

最后说明一点,页面生成的html里还有这个

<input type="hidden" name="TreeView1_SelectedNode" id="TreeView1_SelectedNode" value="TreeView1t0" />

这里面放的是被选中的节点所在的span的id。

搞清楚以上几点,就可以看具体是怎么做的了,首先是treeview控件的代码

我要用的是TreeNodePopulate方法来绑定数据,所以上面先加一个根节点,值为0,注意一点要把PopulateOnDemand属性设置为True。

然后再来看后台代码

这个是删除节点的代码,初学者也能看明白,但为什么这样写一会儿看ajax方法就知道了

Treeview的绑定代码,数据库的结构很简单,就是id,classname,parentid三个字段,parentid表示父节点的id。相信用过treeview的朋友应该能看懂上面的代码,主要是上面红色的部分,这样做就可以让节点所在的span生成href属性,属性值为节点的值。这样我们在客户端就可以取到节点值了。

接下来是客户端选择节点的代码,当然是javascript,不过本人的javascript学的不精,幸好前一段时间研究了一下jquery这个好东西。所以下面的代码都是用jquery实现的(jquery的具体语法看这里http://jquery.org.cn/,我不对语法做具体说明了,只说明语句作用)

注释已经很清楚了,不再多说。

下面是最重要的删除部分,所用的ajax方法也是jquery自带的(jquery真是越用越顺手),

        $("#delNode").click(function(){
            
var selected = document.getElementById($("#TreeView1_SelectedNode").val());//取得选择的节点
            if(selected != null)
            
{
                
//调用jquery的ajax方法删除节点
                $.ajax({
                type: 
"get",
                dataType: 
"text",
                url: 
"treeview.aspx",
                data: 
"id=" + $("#selectedvalue").val(),
                success: 
function(msg){
                        
if(msg=="0")//删除成功
                            DelNode(selected);//删除页面上相应的节点
                        else
                            alert(msg);                            
                    }

                }
);
            }
                
            
else
                alert(
"请先选择节点");
                
        }
);
        
    
    
function DelNode(node)
    
{
        
var subdiv = "#" + node.id.replace("t","n"+ "Nodes";//节点的子节点所在div的id
        if($(subdiv).html() == null)//没有子节点
        {
            
if($(WebForm_GetParentByTagName(node,"div")).find("table").length == 1)//这个用来判断是否有兄弟节点
            {
                
//如果只有一个节点,没有其他兄弟节点的话,就需要把这个节点所在的div一起删掉
                var parentdiv = WebForm_GetParentByTagName(node,"div")
                $(parentdiv).remove();
                $(
"#" + parentdiv.id.replace("t","n").replace("Nodes","")).parent().html("<img src="/jsonTest/WebResource.axd?d=lBLgNV6VfPf2WYaPivyJeox2LqmFZnR_zUU0BO2r0tM1&amp;t=633087263926406250" alt="" />");//替换父节点的前的图片,把展开的图片换成空白图片
            }

            
else
                $(WebForm_GetParentByTagName(node,
"table")).remove();//有兄弟节点,只删除节点本身的table
        }

        
else
            alert(
"请先删除子节点");//有子节点的话不能直接删除
    }


以上就是主要的部分,有兴趣的朋友可以一起讨论一下。用
ajax添加节点的方法正在研究中,下次再发。