第三十六章： 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視頻教程翻譯成文檔，轉載請註明原文出處，歡迎轉載