admin 管理员组文章数量: 887017
2024年2月29日发(作者：手机数据库管理软件)
jQuery Treeview的增删操作
Treeview带给我们一个很好的树形结构的表现形式，不过要对Treeview进行细致的操作，官方文档中，没有找到（都是英文，懒得看了）。不过既然了解了Treeview的生成原理，自己动手做做也没什么困难。
1 回顾一下Treeview的原理
html代码：
- 天津
- 南开
- 河东
- 北京
js代码：注意和html的关系——mytree
运行结果
2 DOM操作（资料来源/xmldom/）
首先熟悉一下dom对象的操作
2.1 createElement(name)：创建节点
说明：创建元素节点，此方法可返回一个 Element 对象。
参数：name 字符串值，这个字符串可为此元素节点规定名称。
2.2 firstChild 首子节点属性：
说明：可返回文档的首个子节点。
2.3 lastChild 末尾节点属性
说明：可返回文档的最后一个子节点。
2.4 appendChild(node) 追加子节点：
说明：该方法在指定元素节点的最后一个子节点之后添加节点。
语法：Child(node)
参数：node 必需。要追加的节点。
2.5 insertBefore(new_node,existing_node) 插入节点
说明：方法在已有的子节点之前插入一个新的子节点。该方法返回这个新的子节点。
语法：Before(new_node,existing_node)
参数1：new_node 必需。要插入的节点。
参数2：existing_node 必需。已有节点。在此节点之前插入新节点。
2.6 hasChildNodes()判断是否有子节点
说明：如果当前元素节点拥有子节点，则 返回 true，否则返回 false。
语法：ldNodes()
2.7 setAttribute((name,value) 方法创建或改变某个新属性。
语法：ribute(name,value)参数 描述
参数1：name 必需。规定要设置的属性名。
参数2：value 必需。规定要设置的属性值。
2.8 示例1
html代码：一行两列的表格；
| a1 | a2 |
js代码：添加一格
执行效果：
2.9 示例2
html代码：一行两列的表格；
- a1
- a2
js代码：添加一格
js函数，增加了参数，灵活针对不同标记。
执行效果：
3 Treeview动态增加节点。
了解了上述的原理，其实增加节点就很容易了，基本原理和上述的示例2相同。只是这里需要解决两个问题：
在哪里增加？
增加以后是何种状态？
（至于，Treeview应该有专门的操作，因为有个，只是懒得琢磨了，由于要求不复杂，就自己随意写了几个方法）
3.1 如何感知在哪里添加
这里做了两件事情，一个是给
- a1
- a2
取得对象js代码：
var element; //全局变量
function selnode(event){
var evt = event || ;
var element=ment || ;
}
3.2 如何添加
了解Treeview的结构我们知道，子节点就是在当前
- „„„„
js实现代码
function addtree(){
if(element!=null)
{
var u=Element("ul"); //创建
-
ext="a3";
Child(i);
Child(u); //ul添加到上层选中的节点
}
}
3.3 样式的控制
上图可以看到，“a3”插入到了指定位置，但格式不对（线条未收口）。研究了一下jQuery的官方示例，发现，最后一个节点有个样式：
class=”last"
上述js增加语句：
ribute("class","last");
效果：
3.4 其它
这个是最基本的思路，其中没有考虑到得因素很多，只是基本实现了一下。实际情况可能有：
空树，添加节点，此时已经有
- ，直接添加
- 即可；
一个节点下的第二个子节点：
不能两个都是“last”，此时需要使用insertBefore（）方法。
- 即可；
var i=Element("li"); //创建
版权声明：本文标题：jQuery Treeview的简单操作 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/free/1709217533h540708.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论