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

作者：不正经 | 2024-03-27 06:23:50

踩

ztree table

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

chrome

opera

不使用对方css


/*-------------------------------------
zTree Style
version:	3.4
author:		Hunter.z
email:		hunter.z@263.net
website:	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>

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop】