PHP + zTree插件樹型文件夾顯示
阿新 • • 發佈:2018-09-12
展開 led 節點數據 目錄 parent php代碼 分享 class 節點數 首先引入ztree的 css
zTree 是一個依靠 jQuery 實現的多功能 “樹插件”。優異的性能、靈活的配置、多種功能的組合是 zTree 最大優點。專門適合項目開發,尤其是 樹狀菜單、樹狀數據的Web顯示、權限管理等等。
● zTree v3.0 將核心代碼按照功能進行了分割,不需要的代碼可以不用加載 ● 采用了延遲加載技術,上萬節點輕松加載,即使在 IE6 下也能基本做到秒殺 ● 兼容 IE、FireFox、Chrome、Opera、Safari 等瀏覽器 ● 支持 JSON 數據 ● 支持靜態和 Ajax 異步加載節點數據 ● 支持任意更換皮膚 / 自定義圖標(依靠css) ● 支持極其靈活的 checkbox 或 radio 選擇功能 ● 提供多種事件響應回調 ● 靈活的編輯(增/刪/改/查)功能,可隨意拖拽節點,還可以多節點拖拽喲 ● 在一個頁面內可同時生成多個 Tree 實例 ● 簡單的參數配置實現 靈活多變的功能首先引入ztree的 css 和 js 文件:
放引入文件的路徑自己選
//CSS
<link rel="stylesheet" href="./ztree/zTreeStyle/zTreeStyle.css" type="text/css">
//JS
<script type="text/javascript" src="./ztree/js/jquery.ztree.all.min.js"></script>
html:
//一定要有 class=‘ztree‘
<ul id="treeDemo" class="ztree"></ul>
js:
<script>
var setting = {
data: {
simpleData: {
enable: true//使用簡單json數據構造ztree節點
}
}
};
var zNodes = JSON.parse(‘<?php echo json_encode($list) ?>‘);
$(document).ready(function () {
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
</script>
後臺PHP代碼寫法:
<?php //將 $list 渲染到後臺即可, $res為數據庫查詢到的數據 $list = array(); foreach ($res as $k=>$v) { // 設置三級目錄的顯示 if($v[‘pid‘] == 0){ $list[$k][‘isParent‘] = true; //是否是父級 } $list[$k][‘id‘] = $v[‘id‘]; $list[$k][‘pId‘] = $v[‘pid‘];//父級id $list[$k][‘name‘] = $v[‘name‘];//文件名稱 $list[$k][‘open‘] = true;//文件夾節點全部展開 }
效果圖:
PHP + zTree插件樹型文件夾顯示