第三十六章： Tree（数）组件【2】
学习要点：
- 异步加载
一、异步加载：
如果想从数据库里获得导航内容，那么就必须实现一张父类子类的无限极分类表。主要有id（编号）、text（名称）、state（状态）、tid（类别）。
PS：在这里点击目录时，不需要通过触发事件来完成异步加载数据。因为它内部已经实现了这个事件。
默认情况下，我们将目录进行了隐藏。如果想要一下子全部展开，可以使用onLoadSuccess(node,data)事件和 expanAll方法。
<!DOCTYPE html>
<html>
<head>
<title>JQuery Easy UI</title>
<meta charset="utf-8"/>
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
<style>
.textbox{
height:200px;
margin:0;
padding:0 2px;
box-sizing:content-box;
}
</style>
</head>
<body>
<ul id="box"></ul>
</body>
</html>
$(function(){
$('#box').tree({
url:'tree.php',
lines:true,
onLoadSuccess:function(node,data){
if(data){
$(data).each(function(index,value){
if(this.state == 'closed'){
$('#box').tree('expandAll');
}
});
}
}
});
});
<?php
//记得是：tree.php
require 'config.hph';
$id = 0;
if(isset($_POST['id'])){
$id = $_POST['id'],
}
$query = mysql_query("SELECT id,text,state FROM think_nav WHERE tid = '$id'") or die('SQL 错误！');
$json ='';
while (!!$row = mysql_fetch_array($query,MYSQL_ASSOC)){
print_r($row);
$json .= json_encode($row).',';
}
$json = substr($json,0,-1);
echo '['.$json.']';
mysql_close();
?>
作者：Roger_CoderLife
链接：https://blog.csdn.net/Roger_CoderLife/article/details/103798945
本文根据网易云课堂JQuery EasyUI视频教程翻译成文档，转载请注明原文出处，欢迎转载