ligerui中的tree的异步动态加载数据库例子

最新推荐文章于 2025-05-27 17:00:18 发布

原创最新推荐文章于 2025-05-27 17:00:18 发布 · 1w 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#tree #数据库 #stylesheet #manager #function #xhtml

ASP.NET 同时被 3 个专栏收录

8 篇文章

订阅专栏

AJAX

6 篇文章

订阅专栏

JAVASCRIPT

2 篇文章

订阅专栏

本文提供了一个LigerUI Tree组件的在线测试链接，展示如何实现异步动态从数据库加载子节点数据。通过在tree的onselect事件中发送当前选中节点的id到后台，后台返回子节点的JSON数据并使用loaddata方法进行加载。

在线测试: http://vazumi.net.s1.kingidc.net/example/tree.htm

截图:

源码:页面右键就在里面，这里我也贴出来

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>tree</title>
    <link href="../lib/ligerUI/skins/aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />        
    <script src="../lib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="../lib/ligerUI/js/ligerui.min.js" type="text/javascript"></script>
    
     <script type="text/javascript">
        var manager = null;
        $(function ()
        {
            $("#tree1").ligerTree(
            {
                checkbox:false,  
                nodeWidth : 250,
                onSelect: onSelect 
            });
            manager = $("#tree1").ligerGetTreeManager();
        });
        
        function onSelect(note) //这里的异步加载逻辑取决于你的数据库设计，把选中节点的id传回去，传回子节点json然后加载
        {                    
                if (note.data.id=="0")  
                {                   
                   if (note.data.children && note.data.children.length == 0)
                        manager.loadData(note.target, "/service/DataHandler.ashx?View=expstate");  //加载省和直辖市              
                }
                else
                {
                   if (note.data.children==undefined)
                   {
                        if  (note.data.id.toString().substr(2,2)=="00")
                        {
                            manager.loadData(note.target, "/service/DataHandler.ashx?View=expcity&stateid="+ note.data.id);  //加载城市
                        }
                        else
                        {
                            if (note.data.id.toString().substr(4,2)=="00")
                                manager.loadData(note.target, "/service/DataHandler.ashx?View=expsubcity&cityid="+ note.data.id);  //加载区县
                        }                        
                   }
                }                
        }     
     
    </script>        
</head>

<body>    
    <div  style="width:400px; height:300px;border:solid 1px blue; margin-top:50px; margin-left:50px; overflow:auto">
    <ul id="tree1" > 
        <li isexpand="false" id="0"><span>我们都有一个家，名字叫中国</span><ul></ul></li>
    </ul> 
    </div>
    <div style="display:none">     
    </div>
</body>
</html>

讲解:

什么原理，tree的onselect事件里，把当前选中的节点的id传回后台，用loaddata方法把子节点json传回来，加载进去，没了