【www.gdgbn.com--jquery】

一，简介  ligertree的功能列表： 1,支持本地数据和服务器数据(配置data或者url) 2,支持原生html生成tree 3,支持动态获取增加/修改/删除节点 4,支持大部分常见的事件 5,支持获取选中行等常见的接口方法   二，第一个例子 引入库文件 遵循ligerui系列插件的设计原则(插件尽量单独)，ligertree是一个单独的插件，也就是说只需要引入plugins/ligertree.js和样式css教程文件就可以使用(当然必须先引入jquery)，在这个例子中，我把tree用到的样式和图片分离了出来，有兴趣的朋友可以下载来看看   

<script src="lib/jquery/jquery-1.3.2.min.js" type="text/网页特效"></script>
    
    <script src="lib/ligerui/js/plugins/ligertree.js" type="text/javascript"></script>

加入html   

        
            节点1
            
                
                    节点1.1
                     
                        节点1.1.1
                        节点1.1.2
                     
                 
                 节点1.2
            
           
    

调用ligertree

view sourceprint? $("#tree1").ligertree(); 效果图 三，常用场景 场景一：不使用复选框： 

$("#tree2").ligertree({ checkbox: false });

场景二：不使用复习框和图标： 

$("#tree3").ligertree({ checkbox: false, parenticon: null, childicon: null });

效果如图：  场景三：配置data参数加载树： 

$("#tree1").ligertree({ data: [
                { text: "节点1", children: [
                    { text: "节点1.1" },
                    { text: "节点1.2" },
                    { text: "节点1.3", children: [
                         { text: "节点1.3.1" },
                         { text: "节点1.3.2" }
                    ]
                    },
                    { text: "节点1.4" }
                 ]
                },
                { text: "节点2" },
                { text: "节点3" },
                { text: "节点4" }
            ]
            });

场景四：配置url参数加载树：   

$("#tree1").ligertree({ url: "json.txt" });

场景五：动态增加节点： 

var manager = null;
        $(function ()
        {
            $(".l-tree").ligertree({ checkbox: true });
            manager = $(".l-tree").ligergettreemanager();
        });
        function addtreeitem()
        {
            var node = manager.getselected();
            var nodes = [];
            nodes.push({ text: ‘测试节点’});
            if (node)
                manager.append(node.target, nodes); 
            else
                manager.append(null, nodes);
        }

场景六：删除节点：   

function removetreeitem()
        {
            var node = manager.getselected();
            if (node)
                manager.remove(node.target);
            else
                alert("请先选择节点");
        }

场景七：折叠/展开节点：   

function collaps教程eall()
        {
            manager.collapseall();
        }
        function expandall()
        {
            manager.expandall();
        }

场景八：事件支持：   

$(function ()
        {
            $("#tree1").ligertree(
            {   
                url: "json.txt",  
                onbeforeexpand: onbeforeexpand,
                onexpand: onexpand,
                onbeforecollapse: onbeforecollapse,
                oncollapse: oncollapse, 
                onbeforeselect: onbeforeselect,
                onselect: onselect,
                oncheck: oncheck
            }); 
        });
        function onbeforeselect(note)
        {
            alert("onbeforeselect:" + note.data.text);
            return true;
        }
        function onselect(note)
        {
            alert("onselect:" + note.data.text);
        }
        function onbeforeexpand(note)
        {
            alert("onbeforeexpand:" + note.data.text);
        }
        function onexpand(note)
        {
            alert("onexpand:" + note.data.text);
        }
        function onbeforecollapse(note)
        {
            alert("onbeforecollapse:" + note.data.text);
        }
        function oncollapse(note)
        {
            alert("oncollapse:" + note.data.text);
        }
        function oncheck(note, checked)
        {
            alert("oncheck:" + note.data.text + " checked:" + checked);
        }

场景九：异步动态加载节点

var manager = null;
        $(function ()
        {
            $("#tree1").ligertree(
            {   
                url: "json.txt",  
                onbeforeexpand: onbeforeexpand 
            });
            manager = $("#tree1").ligergettreemanager();
        }); 
        function onbeforeexpand(note)
        {
            if (note.data.children && note.data.children.length == 0)
            {
                //这里模拟一个加载节点的方法，append方法也用loaddata(target,url)代替
                manager.append(note.target, [
                { text: note.data.text + ""s child1" },
                { text: note.data.text + ""s child2" },
                { text: note.data.text + ""s child3" }
               ]);
            }
        }

本文来源：http://www.gdgbn.com/wangyezhizuo/29938/