ligerUI

原文章位置：http://www.cnblogs.com/leoxie2011/archive/2011/04/17/2019223.html
一，简介

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/javascript"></script>
    <link href="lib/ligerUI/skins/Aqua/css/ligerui-tree.css" rel="stylesheet" type="text/css" />
    <script src="lib/ligerUI/js/plugins/ligerTree.js" type="text/javascript"></script>

加入HTML

<ul id="tree1">
        <li>
            <span>节点1</span>
            <ul>
                <li>
                    <span>节点1.1</span>
                     <ul>
                        <li><span>节点1.1.1</span></li>
                        <li><span>节点1.1.2</span></li>
                     </ul>
                 </li>
                 <li><span>节点1.2</span></li>
            </ul>
        </li>   
    </ul> 

三，常用场景

场景一：不使用复选框：

$("#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 collapseAll()
        {
            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" }
               ]);
            }
        }