測试了一下,兼容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. Tab标签栏 切换 权威总结

    angular的标签栏,有两种方法实现: 内容全部加载到页面中,再利用ng-show指令. 将每一块要加载的内容做成模板,利用ng-if指令加载. 用bootstrap的tab组件 用angular的 ...

  2. （转）C#静态构造函数

    静态构造函数是C#的一个新特性,在编程过程中用处并不广,它的主要目的是用于初始化一些静态的变量. 因为这个构造函数是属于类的,而不属于任何一个实例,所以这个构造函数只会被执行一次,而且是在创建此类的第 ...

  3. （转）jquery.validate.js 的 remote 后台验证

    之前已经有一篇关于jquery.validate.js验证的文章,还不太理解的可以先看看:jQuery Validate 表单验证(这篇文章只是介绍了一下如何实现前台验证,并没有涉及后台验证remot ...

  4. 像table一样布局div的CSS属性详解

    .equal {                     display:table;                     border-collapse:separate;margin: aut ...

  5. 汇编笔记之 ret 、retf和call

    作用: ret  将 栈顶数据出栈到IP retf 将 栈顶数据出栈到IP ,然后再次将栈顶数据出栈到CS 这样一来,可以使程序跳转到已经定义好了的代码段去执行. call 语法 call s0 (如 ...

  6. QT学习篇： 入门（二）

    库存订单界面: (1)包括序号.订单代码.订单名称.产品代码.产品类型.计划加工数量.最晚完工日期. (2)model增加临时map,用于存储库存订单. (3)后台计算完成后,会将库存订单推送给前台, ...

  7. void *memmove( void* dest, const void* src, size_t count );数据拷贝，不需要CPU帮助

    分享到 腾讯微博 QQ空间 新浪微博 人人网 朋友网 memmove 编辑词条 编辑词条 -->   memmove用于从src拷贝count个字符到dest,如果目标区域和源区域有重叠的话,m ...

  8. 解压Taobao手机客户端发现的东西

    今天解压了Taobao手机客户端发现了几个.so文件, 其中有两个挺感兴趣的,查了一下,以后去研究下. libBSPatch.so 是用于支持增量更新功能的库文件. libwebp.so  好像是We ...

  9. 从win7到mac os再到win10，体验总结

    首先介绍自己的身份,软件工程毕业,现在IT男一枚,php程序员(前端必须会的啦). 原先自己用的是win7系统,大学四年都在用,所以习惯了.开发方式也是传统式的,以文件概念为主(就是手动管理文件),版 ...

  10. BroadcastReceiver 案例

    BroadcastReceiver 可以接收来自系统和应用的广播,他的生命周期非常简单,只是从对象开始调用他到运行onReceiver方法之后就结束了.要想使用BroadcastReceiver和使用 ...