使用zTree控制項製作的表格形式的樹形+資料菜單，ztree樹形
測試了一下,相容ie7以上,
chrome
opera
ff
不使用對方css
/*-------------------------------------zTree Styleversion:3.4author:Hunter.zemail:hunter.z@263.netwebsite:http://code.google.com/p/jquerytree/-------------------------------------*/.ztree .clear:after{ content:"."; display:block; height:0; clear:both; visibility:hidden; }.ztree .clear{ zoom:1; }.ztree .fleft{float:left; }.ztree .fright{float:right; }.ztree li{vertical-align:bottom/*ie7 bug*/;}.ztree,.ztree ul,.ztree li{padding: 0px;margin: 0px;display: block;width: 100%;}.ztree table{border-collapse:collapse;width:100%;border-spacing:0;border: 1px solid #bcbcbc;}.ztree .tableA{display: block;width: 100%;color: black;text-decoration:none;cursor: default;}.ztree .tableA:hover{background-color: #fafafa;}.ztree a.tableA:focus {outline:none!important;}.ztree table td{text-align:center;padding: 10px;}.ztree .td1{width:40%;}.ztree td.cline{border-left: 1px solid #bcbcbc;border-right: 1px solid #bcbcbc;}.ztree .td2{width:10%;}.ztree .td3{width:10%;}.ztree .td4{width:10%;}.ztree .td5{width:10%;}.ztree .td6{width:10%;}.ztree .td7{width:10%;}.ztree .ztitle td{background-color: #fafafa;height: 40px;}.ztree .ztitle .td1 .box{position: relative;width: 100%;height: 100%;}.ztree .ztitle .td1 .plb{position: absolute;left:40px;bottom: 0px;white-space: nowrap;}.ztree .ztitle .td1 .ptr{position: absolute;right:40px;top: 0px;white-space: nowrap;}.ztree .data {border-top:0px none;}.ztree .data .td1{text-align: left;}.ztree .data .break{white-space: normal;word-wrap: break-word;word-break: break-all;}.ztree .data .switch{cursor: pointer; text-align:left;}.ztree .data .switch{background:no-repeat 10px center; padding-left: 25px; }.ztree .data .center_open{background-image:url(./img/show.png); }.ztree .data .center_close {background-image:url(./img/hide.png); }.ztree .data .center_docu {background-image:url(./img/child.png); }
html代碼
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>主動流失率</title> <script src="static/sea-modules/seajs/seajs/2.3.0/sea.js"></script> <script src="static/sea-modules/seajs/seajs-css.js"></script> <script> seajs.config({ base:'./static/sea-modules/', alias: { "$": "jquery/jquery-ext/1.0.0/jquery-ext.js" } }); </script> <style type="text/css"> .test{width:200px;} </style> </head> <body><ul class="ztree"><li> <a class="tableA" href="javascript:void(0);"><table class="ztitle"> <tr> <td class="td1"><div class="box"><div class="plb">姓名</div><div class="ptr">資訊</div></div></td> <td class="td2 cline">所在單位</td> <td class="td3">崗位</td> <td class="td4 cline">上次九宮格位置</td> <td class="td5">360測評排名</td> <td class="td6 cline">直屬員工</td> <td class="td7">直接彙報人數</td> </tr> </table> </a> </li></ul><ul id="tree" class="ztree zdata"></ul><script type="text/tpl" id="ztreeTPL"> <a class="tableA" href="javascript:void(0);"><table class="data"> <tr> <td class="td1"><span style="margin-left:{{marginLeft}}px;" id="{{this.tId}}_switch" class="button level{{this.level}} switch {{#if this.isParent}}{{#if this.open}}center_open{{else}}center_close{{/if}}{{else}}center_docu{{/if}}" treenode_switch="">{{this.constructor}}</span></td> <td class="td2 cline break">所在單位</td> <td class="td3 break">{{this.constructor}}</td> <td class="td4 cline break">上次九宮格位置</td> <td class="td5 break">{{this.constructor}}</td> <td class="td6 cline break">直屬員工</td> <td class="td7 break">{{this.constructor}}</td> </tr> </table> </a></script> <script type = "text/javascript" >seajs.use(['jquery/zTree/3.0.0/main','gallery/handlebars/1.0.2/handlebars'],function($,tpl){ var zNodes =[ { name:'', children: [ { name:''}, { name:'', children: [ { name:''}, { name:''} ]}, { name:'', isParent:true} ] }, { name:''}, { name:'',isParent:true} ]; var setting = { view:{ addDiyDom: function(rootId,nodeObj) { console.log(arguments); nodeObj.marginLeft = 20 * nodeObj.level; var html = $('#ztreeTPL').html(); html = tpl.compile(html)(nodeObj); $("#" + nodeObj.tId).html(html); }, showIcon:0, showTitle:0, showLine:0, selectedMulti:0, txtSelectedEnable:0 } }; $.fn.zTree.init($("#tree"), setting, zNodes);});</script></body></html>
這個應該不難吧。。你先去網上下個Dtree的分類樹例子（如果找不到，我可以發個你）。在後台傳一個list進來。這個list儲存的對象有個屬性是子節點的list。在幕後處理好後，在前台用c標籤遍曆這個list，可以根據varstatus.index來控制tree的節點。
Java，jQuery tree，樹形的控制項不少，但樣式都不太好，以ztree舉例，怎改它檔案夾的
不知道改就不要改了 不要把別人的東西改亂了 到時候自己也糊塗了 JQUERY外掛程式都是很靈活的 不會像你說的那樣沒有檔案夾樣式的 我之前都看到了有檔案夾的 你隨便搜一下就出來了
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
