(JavaScript)实现在客户端动态改变Treeview节点的选中状态

Asp.net 2.0 中的 Treeview 非常好用，而且轻便。但在使用过程中，往往会发现一些不够人性化的地方。

　　例如您要设计一棵树，里面放置了一些收藏的网址。在这棵树中，节点的 SelectAction 只有 Expand 和 NavigateUrl 状态，也就是说没有回调节点。这个时候您会发现一个严重的问题：点击节点后，节点不会显示为选中状态（背景颜色没改变），哪怕你已经设置了 SelectedNodeStyle 。

　　SelectedNodeStyle 必须在回调以后才会生效，也就是说，页面要刷新。这是难以忍受的。如图：

　　JavaScript 可以帮助我们改变这个尴尬的局面。一个简单的思路是，Node.Text 不是单纯的 Text，而是修改为一个带 ID 的 Span 。我们增加以下方法：

/**//// <summary>

/// 把节点设置为客户端选中状态

/// </summary>

private void SetNodeText(TreeNode node)

{

string id = "spnode_" + node.Value;

node.Text = "<span style='cursor:hand' id='" + id + "' οnclick=\"SetNode('" + id + "')\">" + node.Text + "</span>";

}

　　我们可以看到，点击节点，则调用了客户端的一个 SetNode 脚本：

var lastnode = "";

function SetNode(node)

{

document.getElementById(node).style.backgroundColor='#DBDBDB';

if(lastnode!="" && lastnode!=node)

{

document.getElementById(lastnode).style.backgroundColor='#FFFFFF';

}

lastnode=node;

}

</script>

　　在这个脚本中，我们采用一个全局变量 lastnode ，来保存上一次点击的节点 ID。

　　OK，现在为每个节点都调用 SetNodeText 方法，效果就出来了：

源代码：/Files/lemony/TreeViewEx.rar

注：

1，每个 Node 的 Value 都应该不同，这样在客户端产生的 Span ID 才会不重复。
2，JavaScript 可以辅助 TreeView 实现更好的客户端效果，只要你想得到。

转载于:https://www.cnblogs.com/lemony/archive/2007/05/18/751053.html

(JavaScript)实现在客户端动态改变Treeview节点的选中状态相关推荐

html单选框怎么用js实现选中状态,怎么用js代码改变单选框的选中状态
今天突然有一个需求要用到,使用js代码改变单选框的选中状态.当时想也不想直接 function doGender(gender) { if (gender == "男") { ge ...
C# winform TreeView设置为选中状态（蓝底白字）
今天碰到个很贱的问题,TreeView设置某节点为选中节点,但是就是不显示像鼠标点击选中的样式(蓝底白字). TreeView各种属性方法试验,发现在TreeView.SelectedNode之前,一 ...
解决javascript动态改变img的src属性图片不显示问题
解决javascript动态改变img的src属性图片不显示问题参考文章: (1)解决javascript动态改变img的src属性图片不显示问题 (2)https://www.cnblogs.co ...
zookeeper专题：使用zookeeper客户端实现动态监听节点并获取数据
文章目录 1. zookeeper原生客户端 2. Curator客户端 1. zookeeper原生客户端 zookeeper原生客户端就是zookeeper官方自带的客户端,作为代码与zk服务器交 ...
用javascript 动态改变iframe 的src 属性
原文地址为: 用javascript 动态改变iframe 的src 属性 <iframe id="xx"></iframe> <iframe id= ...
动态生成treeview
上一篇blog里的方法可以一次性的把数据库里的数据构造成treeview,但是如果数据量特别大那种方法就不行了,下面是动态构造treeview的办法,就是先把根(第一级)构造出来,然后每一个根节点下面 ...
JavaScript学习笔记：动态添加与删除表格行
文章目录一.添加表格行与单元格二.动态删除表格行与单元格三.案例演示1 四.案例演示2 一.添加表格行与单元格 Javascript可以控制table,动态的插入行和单元格.rows保存着< ...
glog 设置日志级别_如何动态改变日志级别
前言关于日志级别,大部分项目可能都设置为info级别,当然也可能有一些追求性能或者说包含很多敏感信息的项目直接将级别设置为warn或者error:这时候如果项目中出现一些未知异常,需要用到很详细的日 ...
vue 动态添加click_vue，在模块中动态添加dom节点，并监听
vue向数组中动态添加数据 vue中数据更新通过v-model实现,向数组中添加数据通过push()实现,向shortcuts数组中动态添加newShortcut对象中的title和action th ...

(JavaScript)实现在客户端动态改变Treeview节点的选中状态

(JavaScript)实现在客户端动态改变Treeview节点的选中状态相关推荐

最新文章

热门文章