測试了一下,兼容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. spring-data-mongodb一个系统xml文件里面配置两个数据源

    spring-data-mongodb一个系统xml文件里面配置两个数据源 参考文档如下: http://www.iteye.com/problems/92789 http://stackoverfl ...

  2. ajax提交请求为啥url要用这个函数encodeURI

    参考如下: 如果你是通过form提交的,那就不需要用这个了.但是如果是你使用url的方式例如:ajax提交到后台的,就需要对url进行encodeURI编码,否则,会导致后台出现各种乱码,不加enco ...

  3. css空格和去浮动的应用

    今天做了项目用到css,请教前端解决,第一个是记得css空格之间的关系是隶属关系,但是在元素中却是并列关系,如<div class="right_side_item_moban gra ...

  4. ASP.NET数据绑定控件简介

    •数据绑定分为数据源和数据绑定控件两部分(①数据绑定控件通过数据源获取和修改数据②数据绑定控件通过数据源隔离数据提供者和数据使用者)数据绑定控件→数据源→数据库•数据源:SqlDataSource(连 ...

  5. 【转】深入理解Java内存模型（四）——volatile

    volatile的特性 当我们声明共享变量为volatile后,对这个变量的读/写将会很特别.理解volatile特性的一个好方法是:把对volatile变量的单个读/写,看成是使用同一个监视器锁对这 ...

  6. android使用apktool反编译出现Input file (d:\t) was not found or was not readable

    Input file (d:\t) was not found or was not readable 出现这个错误是因为apktool压缩包下载错误,我是下成首页的那个压缩包了 正确下载地址:htt ...

  7. Linux学习——卸载Ubuntu，安装CentOS，第一次使用命令

    最近,看了相关的资料,发现Ubuntu不是很利于学习Linux操作系统,而CentOS比较有利于学习Linux操作系统,就卸载了. 当然,对于菜鸟,自然是很没有主见. 卸载Ubuntu感觉很奇怪,下来 ...

  8. 常见MYSQL导入导出数据命令

    导出数据库: mysqldump –uuser -ppassword -hhost databasename > target_20150225.sql 打包: tar zcvf target_ ...

  9. FE: Sass and Bootstrap 3 with Sass

    Sass简介 Sass是CSS的预处理语言:提供了变量定义.函数定义.函数调用.类继承.嵌套(CSS层级关系)及代码引入功能. Sass安装指南 MAC OS X 10.10.3   终端 -> ...

  10. css属性之appearance

    appearance 属性允许您使元素看上去像标准的用户界面元素. 案例: 使 div 元素看上去像一个按钮 <!DOCTYPE html> <html> <head&g ...