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

chrome

opera

ff

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

使用zTree控件制作的表格形式的树形+数据菜单的更多相关文章

  1. C/S模式开发中如何利用WebBrowser控件制作导航窗体

    原文:C/S模式开发中如何利用WebBrowser控件制作导航窗体 转自: CSDN 相信不少同学们都做过MIS系统的开发,今天这里不讨论B/S模式开发的问题.来谈谈winform开发.用过市面上常见 ...

  2. Web打印控件Lodop实现表格物流单的打印

    Web打印控件Lodop实现表格物流单的打印 一.lodop打印预览效果图 LODOP.PRINT_SETUP();打印维护效果图 LODOP.PREVIEW();打印预览图 二.写在前面 最近项目用 ...

  3. C#使用splitContainer控件制作收缩展开面板

    C#使用splitContainer控件制作收缩展开面板 原创 2011年07月19日 17:18:02 标签: c# / object / 扩展 / 测试 15690         最近对Squi ...

  4. 重新想象 Windows 8.1 Store Apps (80) - 控件增强: WebView 之基本应用, POST 数据, 与 JavaScript 交互

    [源码下载] 重新想象 Windows 8.1 Store Apps (80) - 控件增强: WebView 之基本应用, POST 数据, 与 JavaScript 交互 作者:webabcd 介 ...

  5. WPF 引用第三方库的控件在设计器加上设计时数据和属性

    本文告诉大家如何在 VisualStudio 2022 的 XAML 设计器中,在设计时给第三方控件加上设计用的属性和数据的方法 此功能要求使用不低于 VisualStudio 2019 的 16.8 ...

  6. 网页WEB打印控件制作-开放源码

    在WEB系统中,打印的确是比较烦人的问题,如果我们能制作一个属于自己的自定义的打印插件,那么我们在后续自定义打印的时候能随心所欲的控制打印,这样的效果对于程序员来说是非常开心的一件事件,本文将自己开发 ...

  7. C# winform平台下使用spread控件导出excel表格

    //首先要引入两个控件:1.根据自己的office 版本在项目->添加引用->microsoft office object 12.0 library (2010版) //2.在.net中 ...

  8. 如何使用免费控件将Word表格中的数据导入到Excel中

    我通常使用MS Excel来存储和处理大量数据,但有时候经常会碰到一个问题—我需要的数据存储在word表格中,而不是在Excel中,这样处理起来非常麻烦,尤其是在数据比较庞大的时候, 这时我迫切地需要 ...

  9. 利用免费的Spire.XLS控件制作Excel报表

    我们小组上个季度接手了一个项目其中需要实现创建excel文档的功能,寻找实现这个功能的控件的任务分配给了我,通过百度搜索我找到了一个免费的控件,它是由E-iceblue公司推出的spire.xls控件 ...

随机推荐

  1. 使用PHP CURL的POST数据

    使用PHP CURL的POST数据 curl 是使用URL语法的传送文件工具,支持FTP.FTPS.HTTP HTPPS SCP SFTP TFTP TELNET DICT FILE和LDAP.cur ...

  2. android-Activity的执行流程

    概述 The following diagram shows the important state paths of an Activity. The square rectangles repre ...

  3. JavaScript 客户端JavaScript之cookie和客户端持久性

    Document对象都有一个cookie属性,它使得JavaScript代码能够在用户的硬盘上持久地存储数据, 并且能够获取以这种方式存储的数据.客户端持久性是赋予WEB应用程序记忆力的一种简单方法. ...

  4. js鼠标右键操作

    一个页面中,BODY中用oncontextmenu='return false'来取消鼠标右键: 在JS中设置oncontextmenu='return true'用window.document. ...

  5. class类名的管理

    var a=document.querySelector(".div1"); a.classList.remove("div2");//减掉一个 a.class ...

  6. css background-position:x% y%

    规则1: background-position:xpx ypx; 为正值时:背景图片的左上顶点朝右下移动直至距离div的左上顶点为xpx ypx: 规则2: background-position: ...

  7. web页面相关的一些常见可用字符介绍

    首先是一张图片,是一张一些字符以及想对应的HTML实体表示的对照图片.如下: 一.引号模样或内心的些字符 请选择该表格要呈现的字体: 字符以及HTML实体 描述以及说明 " " 这 ...

  8. Jquery插件模版

    ;(function($){ $.fn.jcDate = function(options) { var defaults = { IcoClass : "jcDateIco", ...

  9. sunJCE or ibmJce,was服务器下使用des的注意点

    最近开发了一个应用,在tomcat下一切ok,到was上有报错. 打开debug日志,没有异常?? 继续调查发现是我们的程序引用了一个sun很久以前的jar.这个jar需要单独打开message日志 ...

  10. 深入理解C#：编程技巧总结（二）

    原创文章,转载请注明出处! 以下总结参阅了:MSDN文档.<C#高级编程>.<C#本质论>.前辈们的博客等资料,如有不正确的地方,请帮忙及时指出!以免误导! 在上一篇 深入理解 ...