js权限树的级联操作
来源:互联网 发布:公孙乌龙 知乎 编辑:程序博客网 时间:2024/05/16 12:08
1 前言
用.Net 做Web应用, 有一个很大的苦恼就是没有太趁手的TreeView可用。微软的TreeView仅用作数据显示还行,但服务器控件不停的刷新太影响客户体验。商业化的TreeView(obout treeview / FlyTreeView / Infragistics NetAdvantage Treeview)都不错,特别是obout treeview短小精干讨人喜欢,但许可证是一个大障碍(公司一般不会花钱买的)。我一般而言,在TreeView上做事情,用checkbox的时候较多,特别是父子节点的关联,因此,对Microsoft TreeView改造就从父子节点的关联开始。
2 ASP.Net 2.0 Treeview 简要分析
ASP.Net 2.0 Treeview吹的很不错,但客户端操作几乎为零。微软实现了一些客户端用的. TreeView.js,还不公开,藏在system.web.dll中,以资源的方式通过WebResource.axd来向客户端释放。仔细分析一下TreeView.js,会发现微软为TreeView自动生成的Html脚本结构如下:
<div> //树
<table/> //节点
<div/> //节点的子节点,里面的内容是一个或多个<table/><div/>
</div>
因此,准确的说是<table/><div/>构成一个节点,但很难明确的在DOM中确定一个节点,原因如下:
1. 其ID或Name是顺序排列的,命名规则如下: 树ID + “n” + 节点序号,例如 MyTreen0
商业的TreeView一般在ID中包含层次信息,如: MyTreeNode1_1_2 表示树的1.1.2那个节点,分析起来很容易
2. 上面描述的节点命名的ID,是分配给<table/>里的<A/>也就是显示 加号 减号的那个链接元素,由于该元素在<table/>中,因此给分析带来了难度
3. 叶子节点没有上面所描述的<table/>里的那个<A/>, 无法分析(因此我自己.才会里出现A节点和Input节点,A节点就是有“树ID + “n” + 节点序号”为ID的链接元素,Input节点是<table/>里的Checkbox,命名规则为: 树ID + “n” + 节点序号 + “CheckBox”)
没办法,只有自己写JS函数来处理CheckBox的级联操作,其中用到了微软的TreeView.js 和 WebForm.js,下载链接: TreeView2.rar
加入方法如下:
* 为TreeView加入OnClick事件
* 为TreeView加入OnClick事件
直接在TreeView的属性上加入:OnClick="OnTreeNodeChecked()"
或者:MyTree.Attributes.Add("OnClick", "OnTreeNodeChecked(event)");
* 这样写OnClick事件动作
<. language =. type="text/.">
function OnTreeNodeChecked()
{
var element = window.event.srcElement;
if (!IsCheckBox(element))
return;
var isChecked = element.checked;
var tree = TV2_GetTreeById(<%=SubSysTree.ClientID%>);
var node = TV2_GetNode(tree,element);
TV2_SetChildNodesCheckStatus(node,isChecked);
var parent = TV2_GetParentNode(tree,node);
TV2_NodeOnChildNodeCheckedChanged(tree,parent,isChecked);
}
</.>
function OnTreeNodeChecked()
{
var element = window.event.srcElement;
if (!IsCheckBox(element))
return;
var isChecked = element.checked;
var tree = TV2_GetTreeById(<%=SubSysTree.ClientID%>);
var node = TV2_GetNode(tree,element);
TV2_SetChildNodesCheckStatus(node,isChecked);
var parent = TV2_GetParentNode(tree,node);
TV2_NodeOnChildNodeCheckedChanged(tree,parent,isChecked);
}
</.>
这里是引用了一个外部js文件,如果只是要简单的选择父节点,同时下面子节点全部都全中,其实很简单,下面是我自己摘出来的一段代码。
function setChildrenNodesCheck()
{
var element = window.event.srcElement;
if(element.tagName=="INPUT")
{
var id=element.id.toLowerCase().replace("checkbox","");
id+="Nodes";
var objDivId=document.getElementById(id);//element.getElementsByTagName("input");
var childrenTags= WebForm_GetElementsByTagName(objDivId,"input");
if(childrenTags!=null)
{
for(i=0;i<childrenTags.length;i++)
{
childrenTags[i].checked=element.checked;
}
}
}
}
{
var element = window.event.srcElement;
if(element.tagName=="INPUT")
{
var id=element.id.toLowerCase().replace("checkbox","");
id+="Nodes";
var objDivId=document.getElementById(id);//element.getElementsByTagName("input");
var childrenTags= WebForm_GetElementsByTagName(objDivId,"input");
if(childrenTags!=null)
{
for(i=0;i<childrenTags.length;i++)
{
childrenTags[i].checked=element.checked;
}
}
}
}
就像上文所说的,所有节点的子节点都包含在一个div中,该div的名字和父节点<table>中的名字是前部分相同,只是后部分不同,一个是checkbox一个是nodes,大家可以跟代码看一下。然后找到div之后,就可以用WebForm_GetElementsByTagName,找到所有的子孩子,然后就控制他的选择状态就可以了。WebForm_GetElementsByTagName是微软提供的函数,是根据标签从当前元素下找elements
- js权限树的级联操作
- JS 操作级联
- 下拉列表 级联菜单操作(js代码的级联操作)
- js操作select标签级联
- 权限分配(级联复选框操作)
- js的省市级联
- LinQ的级联操作
- hibernate的级联操作
- hibernate的级联操作
- mysql 的级联操作
- hibernate的级联操作
- Hibernate的级联操作
- MySQL的级联操作
- Hibernate的级联操作
- 根据XML 用JS做级联操作
- JS----简单的城市级联
- 使用hibernate的级联操作
- 关联关系的级联操作
- 查找对方IP地址技巧五招
- 我每天每月每年该做的事(读文章有感,非原创)
- Debian 5 配置声卡
- ORACLE数据库简介
- Web Service安全控制之——访问IP限制
- js权限树的级联操作
- 关于 队列(C语言) ——(参考算法导论)
- poj 1068 Parencodings
- ini配置文件
- 关于文本文件的格式------回车换行符(CR/LF)
- 我的FoxPro情结
- 《算法之美》---插入排序
- 如何搭建自己的自动化测试框架
- TBuf8向TBufC的转换