測试了一下,兼容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. JAVA彩色图片变灰处理

    File file = new File("F:/firefox.png"); File destFile = new File("F:/pic/" + Sys ...

  2. sql数据库之间数据的转录

    private void Form1_Load(object sender, EventArgs e) { BindDataBase(combDataBaseNew, , ""); ...

  3. tabpagerindictor:mergeReleaseResources FAILED Error:Execution failed for task ':tabpagerindictor:mergeReleaseResources'. > D:\android\adt-bundle-windows-x86_64-20140702\android-open-project-demo-mast

    解决:将项目移动到路径少的目录再运行即可 异常日志: D:\android\adt-bundle-windows-x86_64-20140702\android-open-project-demo-m ...

  4. gis基本概念之"投影变换"-浅谈

    目录 1,概述 2,常用的投影方法有 正解变换 反解变换 数值变换 3,定义投影 4,投影变换 1,栅格(投影变换) 2,要素(投影变换) 注意 1,概述 因为GIS描述的是位于地球表面的信息,所以根 ...

  5. 安装ORACLE 11g 64位 pl/sql无法进入的问题。

    转载自网上的内容: 1)安装Oracle 11g 64位 2)安装32位的Oracle客户端( instantclient-basic-win32-11.2.0.1.0)下载地址:http://www ...

  6. HAOI 硬币购物

    试题描述: 现在一共有4种硬币,面值各不相同,分别为ci(i=1,2,3,4).某人去商店买东西,去了tot次,每次带di枚ci硬币,购买价值为si的货物.请问每次有多少种付款方法. 输入: 第一行包 ...

  7. CURL请求接口

    private function  http_curl($url,$data=null){ //1.初始化,创建一个新cURL资源                 $ch = curl_init(); ...

  8. phpcms v9联动菜单实现筛选

    <!--初始化init--> {php $theurl = "index.php?m=content&c=index&a=lists&catid=$cat ...

  9. str_repeat() 函数

    <?php echo str_repeat(".",13);//重复几次 ?>

  10. lnmp下安装ffmpeg和ffmpeg-php教程

    现在我将我的过程方法发布出来. 以下都是用SSH命令 一.安装ffmpeg 操作系统:centos6 安装ffmpeg有两种方式:①.用源码包安装,这个不知道怎么回事老是报错②用yum命令安装,cen ...