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

来源：互联网发布：蛋糕店游戏不要网络的编辑：程序博客网时间：2024/05/17 03:12

在线测试: 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传回来，加载进去，没了