測试了一下,兼容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. WinHeap.H

    网上找到的,对 Windows Heap 有详细的定义. // file winheap.h typedef void VOID; typedef unsigned __int8 UINT8; typ ...

  2. nexus 的使用及maven的配置

    一.nexus的安装 1.下载nexus(点解这里) 2.下载后解压文件,将解压后的nexus文件放在你自己想要的地方 3.配置环境变量(和配置java的环境变量一样) 4.安装和启动nexus 由于 ...

  3. securecrt简介

    SecureCRT是最常用的终端仿真程序,简单的说就是Windows下登录UNIX或Liunx服务器主机的软件,本文主要介绍SecureCRT的使用方法和技巧 VanDyke CRT 和 VanDyk ...

  4. Js正则表达式提取图片地址

    JavaScript使用正则表达式和Replace两种方法提取IMG标签图片地址,代码如下: /正则表达式 <script language="javascript"> ...

  5. 【学习笔记】【Foundation】字符串

    NSString 创建字符串: char *str="string" NSString* str=@“创建字符串”: NSString* str=[[NSString alloc] ...

  6. Jsonp 解决跨域问题

    话不多说直接贴代码: $.ajax({ async: false, url: 'http://****.****.com/Handler.ashx?vueId=iwNavpicS2', type: & ...

  7. Xcode 如何设置 自动内存管理 转换为 手动内存管理

    建议使用自动内存管理 ARC. 如果不想自动内存管理,可以在build phases 下的compile sources 中找到不想自动管理的.m文件 ,给它加compiler flags 为 -fn ...

  8. 转：解决方案your project contains error s please fix them before running your application

    文章来自于:http://www.mythroad.net/2013/08/05/%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88your-project-contains-e ...

  9. AD14中如何定义PCB尺寸大小（不同于AD9和10）

    以前用的着软件基本都是停留在9和10,14用的少,虽然14增加了很多功能,但是也带来了不变,虽然可以打开各种其他格式的文件,但是有些地方的改动不容忽略,在一个完整的板子下来需要用到的每个地方的点也会有 ...

  10. android 截取指定位置字符串

    String str = "s\ziyuan"; String newStr = str.subString(str.indexOf("\\"),str.len ...