您的位置：首页 > 产品设计 > UI/UE

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

2011-12-12 15:35 525 查看
在线测试: 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传回来，加载进去，没了
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航