jquery treeView工具簡(jiǎn)單樹形目錄工具

發(fā)布時(shí)間：2020-06-22 22:30:10 來(lái)源：網(wǎng)絡(luò) 閱讀：1992 作者：elick 欄目：web開發(fā)

zTree是不錯(cuò)的樹形工具,功能強(qiáng)大異常,不過(guò)因此也帶來(lái)一些問(wèn)題,使用復(fù)雜,體型龐大.

這是zTree的官方網(wǎng)站喜歡的朋友可以多加關(guān)注 http://www.baby666.cn/hunter/zTree.html

zTree有很完善的版主手冊(cè),對(duì)于老手來(lái)說(shuō)很方便,不過(guò)例子里沒(méi)有附帶說(shuō)明,對(duì)于新手立即使用上有些問(wèn)題.這里我舉個(gè)最簡(jiǎn)單例子,用于新手立即使用,以后遇到更多應(yīng)用時(shí)我也會(huì)把例子貼上來(lái).

treeView.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<HTML> 
 <HEAD> 
  <TITLE> ZTREE DEMO </TITLE> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
  <link rel="stylesheet" href="demoStyle/demo.css" type="text/css"> 
  <link rel="stylesheet" href="zTreeStyle/zTreeStyle.css" type="text/css"> 
  <script type="text/javascript" src="jquery-1.4.2.js"></script> 
  <script type="text/javascript" src="jquery.ztree-2.6.js"></script> 
  <SCRIPT LANGUAGE="JavaScript"> 
  var setting = {  
    showLine: true, //是否帶有虛線  
    checkable: true //是否帶有選擇框  
 
};  
//數(shù)據(jù)內(nèi)容  
var zTreeNodes = [  
    {"id":1, "pId":0, "name":"test1"},  
    {"id":11, "pId":1, "name":"test11"},  
    {"id":12, "pId":1, "name":"test12"},  
    {"id":111, "pId":11, "name":"test111"}  
 
];  
$(document).ready(function(){  
        setting.isSimpleData = true;    //是否為簡(jiǎn)單數(shù)組數(shù)據(jù) 這里還可以用json數(shù)據(jù)  
        setting.treeNodeKey = "id";       
        setting.treeNodeParentKey = "pId";  //以那個(gè)下標(biāo)標(biāo)識(shí)父節(jié)點(diǎn)  
var zTree = $("#tree").zTree(setting, zTreeNodes);  
});  
  </SCRIPT> 
 </HEAD> 
 
<BODY> 
 
<ul id="tree" class="tree" style="width:300px; overflow:auto;"></ul> 
 
</BODY> 
</HTML>

把以上代碼復(fù)制到html文件里就可以了,當(dāng)然你必須把該導(dǎo)入的文件全部導(dǎo)入,至于這些文件去官網(wǎng)下就有了,至于數(shù)據(jù)內(nèi)容就得自己想辦法組成這樣格式就行了,也可以用jquery異步請(qǐng)求json數(shù)據(jù)

php異步傳輸數(shù)據(jù):

jquery treeView工具簡(jiǎn)單樹形目錄工具

zTree.hmtl

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<HTML> 
<HEAD> 
<TITLE> ZTREE DEMO </TITLE> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
<link rel="stylesheet" href="demoStyle/demo.css" type="text/css"> 
<link rel="stylesheet" href="zTreeStyle/zTreeStyle.css" type="text/css"> 
<script type="text/javascript" src="jquery-1.4.2.js"></script> 
<script type="text/javascript" src="jquery.ztree-2.6.js"></script> 
<SCRIPT LANGUAGE="JavaScript"> 
var setting = {  
showLine: true,  
async: true, //異步加載  
asyncUrl: "asyncData/node.php", //獲取節(jié)點(diǎn)數(shù)據(jù)的URL地址  
asyncParam: ["name", "id"], //獲取節(jié)點(diǎn)數(shù)據(jù)時(shí)，必須的數(shù)據(jù)名稱，例如：id、name  
asyncParamOther: ["test","true"], //其它參數(shù) ( key, value 鍵值對(duì)格式)  
asyncDataFilter : dataFilter, //異步加載數(shù)據(jù)函數(shù)名  
 
};  
var zNodes =[]; //先定義接收數(shù)據(jù)的數(shù)組  
 
$(document).ready(function(){  
var zTree = $("#tree").zTree(setting, zNodes);  
});  
 
function dataFilter(treeId, parentNode, childNodes) {  
if (childNodes) {  
for(var i =0; i<childNodes.length; i++) {  
childNodes[i].name += "_filter";  
}  
}  
return childNodes;  
}  
 
</SCRIPT> 
</HEAD> 
 
<BODY> 
 
<ul id="tree" class="tree" style="width:300px; overflow:auto;"></ul> 
 
</BODY> 
</HTML>

node.php

<?php ?>  
[<?php  
$pId = "1";  
$pName = "hello world";  
if(array_key_exists( 'id',$_REQUEST)) {  
$pId=$_REQUEST['id'];  
}  
if(array_key_exists('name',$_REQUEST)) {  
$pName=$_REQUEST['name'];  
}  
if ($pId==null || $pId=="") $pId = "0";  
if ($pName==null) $pName = "";  
 
for ($i=1; $i<5; $i++) {  
$nId = $pId.$i;  
$nName = "tree".$nId;  
echo "{ id:'".$nId."', name:'".$nName."', isParent:".(($i%2)!=0?"true":"false")."}";  
if ($i<4) {  
echo ",";  
}  
 
}  
?>]

這是簡(jiǎn)單異步請(qǐng)求數(shù)據(jù),這是原本zTree里的一個(gè)demo,我把這個(gè)和第一個(gè)例子改寫了下,比原來(lái)的例子簡(jiǎn)單了許多,如果想要進(jìn)一步的功能可以看下原來(lái)的例子,這個(gè)很簡(jiǎn)單就不多做說(shuō)明了,又不懂就留言吧

向AI問(wèn)一下細(xì)節(jié)

jquery treeView工具 簡(jiǎn)單樹形目錄工具

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽

jquery treeView工具簡(jiǎn)單樹形目錄工具