jQuery Treeview的增删操作
Treeview带给我们一个很好的树形结构的表现形式，不过要对Treeview进行细致的操作，官方文档中，没有到（都是英文，懒得看了）。不过既然了解了Treeview的生成原理，自己动手做做也没什么困难。
1 回顾一下Treeview的原理
● html代码：
  <ul id="mytree">
    <li>天津
        <ul>
            <li>南开</li>
            <li>河东</li>
        </ul>
    </li>
    <li>北京</li>
  </ul>
● js代码：注意和html的关系——mytree
    <link rel="stylesheet" href="view.css" />
    <script src="jquery-1.6.js" type="text/javascript"></script>
    <script src="kie.js" type="text/javascript"></script>
    <script src="view.js" type="text/javascript"></script>
    <script type="text/javascript" >
        $(document).ready(function(){
            $("#mytree").treeview();   
        });
    </script>
● 运行结果
2 DOM操作（资料来源www.w3school/xmldom/index.asp）
首先熟悉一下dom对象的操作
2.1 createElement(name)：创建节点
● 说明：创建元素节点，此方法可返回一个 Element 对象。
● 参数：name 字符串值，这个字符串可为此元素节点规定名称。
●
2.2 firstChild 首子节点属性：
● 说明：可返回文档的首个子节点。
●
2.3 lastChild 末尾节点属性
● 说明：可返回文档的最后一个子节点。
●
2.4 appendChild(node) 追加子节点：
● 说明：该方法在指定元素节点的最后一个子节点之后添加节点。
● 语法：elementNode.appendChild(node)
● 参数：node 必需。要追加的节点。
●
2.5 insertBefore(new_node,existing_node) 插入节点
● 说明：方法在已有的子节点之前插入一个新的子节点。该方法返回这个新的子节点。
● 语法：elementNode.insertBefore(new_node,existing_node)
● 参数1：new_node 必需。要插入的节点。
● 参数2：existing_node 必需。已有节点。在此节点之前插入新节点。
2.6 hasChildNodes()判断是否有子节点
● 说明：如果当前元素节点拥有子节点，则 返回 true，否则返回 false。
● 语法：elementNode.hasChildNodes()
●
2.7 setAttribute((name,value) 方法创建或改变某个新属性。
● 语法：elementNode.setAttribute(name,value)参数 描述
● 参数1：name 必需。规定要设置的属性名。
● 参数2：value 必需。规定要设置的属性值。
2.8 示例1
● html代码：一行两列的表格；
  <table width="200" border="1">
    <tr id="row">
        <td>a1</td>
        <td>a2</td>
    <tr>
    </table>
jquery框架原理
● js代码：添加一格
  <script>
    //添加单元格
    function addcell(){
        var ElementById("row");
        var ateElement("td");
        c.innerText="insert";
        r.appendChild(c);
    }
  </script>
● 执行效果：
2.9 示例2
● html代码：一行两列的表格；
  <ul id="dot">
    <li>a1</li>
    <li>a2</li>
  </ul>
● js代码：添加一格
  <script>
    //添加单元格
    function addcell(p,s){
        var ElementById(p);
        var ateElement(s);
        c.innerText="insert";
        r.appendChild(c);
    }
  </script>
js函数，增加了参数，灵活针对不同标记。
● 执行效果：
3 Treeview动态增加节点。
了解了上述的原理，其实增加节点就很容易了，基本原理和上述的示例2相同。只是这里需要解决两个问题：
● 在哪里增加？
● 增加以后是何种状态？
（至于，Treeview应该有专门的操作，因为有个Treeview.edit.js，只是懒得琢磨了，由于要求不复杂，就自己随意写了几个方法）
3.1 如何感知在哪里添加
这里做了两件事情，一个是给<li>增加一个感知鼠标操作的方法：
  <ul id="dot">
    <li onclick="selnode(event);" id="abc">a1</li>
    <li>a2</li>
  </ul>
● 取得对象js代码：
    var element;        //全局变量
    function selnode(event){
        var evt = event || window.event;
        var element=evt.srcElement || evt.target;   
    }
3.2 如何添加
了解Treeview的结构我们知道，子节点就是在当前<li>的中间嵌套一套：
<ul><li></li>    ………… </ul>
● js实现代码
    function addtree(){
        if(element!=null)
        {
            var ateElement("ul");    //创建<ul>
            var ateElement("li");        //创建<li>
            i.innerText="a3";
            u.appendChild(i);
            element.appendChild(u);                //ul添加到上层选中的节点
        }
    }
3.3 样式的控制
上图可以看到，“a3”插入到了指定位置，但格式不对（线条未收口）。研究了一下jQuery的官方示例，发现，最后一个节点有个样式：
class=”last"
上述js增加语句：
            i.setAttribute("class","last");
效果：
3.4 其它
这个是最基本的思路，其中没有考虑到得因素很多，只是基本实现了一下。实际情况可能有：
● 空树，添加节点，此时已经有<ul>，直接添加<li>即可；
● 一个节点下的第二个子节点：
不能两个都是“last”，此时需要使用insertBefore（）方法。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。