使用zTree控件制作的表格形式的树形+数据菜单

来源：互联网发布：linux 播放器剪辑编辑：程序博客网时间：2024/05/01 08:57

测试了一下,兼容ie7以上,

chrome

opera

不使用对方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>

5 0