使用zTree控制元件製作的表格形式的樹形+資料選單

阿新 • • 發佈：2019-01-24

測試了一下,相容ie7以上,

chrome

opera

不使用對方css

/*-------------------------------------
zTree Style

version:	3.4
author:		Hunter.z
email:		[email protected]
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控制元件製作的表格形式的樹形+資料選單

測試了一下,相容ie7以上, chrome opera ff 不使用對方css /*------------------------------------- zTree Style version: 3.4 author: Hunter.z email:

winform控制元件縮寫（四）資料

winform控制元件縮寫（四）資料序號縮寫空間名 1 dts DataSet 2 dgv DataGridVi

教你用ActiveReports報表控制元件分析京東雙十一資料的價值

隨著雙十一購物盛會落下帷幕，各大電商平臺紛紛公佈出自己今年的成績。與其它同行不同的是，京東除了公佈1598億的線上下單金額，還公佈了線上線下融合的戰果。面對京東線上、線下海量資料來源，我們該如何進行整合分析，又該怎樣設計報表呢？其實，使用葡萄城ActiveReports 報表控制元件，這項

java applet控制元件製作簽名

applet 生成簽名證書生成證書:keytool -genkey -alias sso_server -keypass sso_key -keyalg RSA -keysize 1024 -validity 365 -keystore E:\key_s

【Visual Studio 擴充套件工具】使用 ComponentOne迷你圖控制元件，進行視覺化資料趨勢分析

　　概述　　　　迷你圖 —— Sparklines是迷你的輕量級圖表，有助於快速視覺化資料。它們是由資料視覺化傳奇人物Edward Tufte發明的，他將其描述為“資料密集，設計簡單，位元組大小的圖形。”雖然迷你圖不包含傳統圖表中的許多元素（如軸和座標），基於它們的簡單性，它們可以比其他圖表型別更具資訊性

CLR自定義.NET控制元件製作（4）——滑鼠訊息的響應

1 #include "stdafx.h" 2 #ifdef _DEBUG 3 #define new DEBUG_NEW 4 #endif 5 #include "myview.h" 6 7 IMPLEMENT_DYNCREATE(CMyView, CView) 8 9 BEGIN_MESSAGE_

DataGridView 控制元件中輕鬆設定DataGridViewComboBoxColumn資料繫結屬性。

小弟在邊學習邊做.net c#專案中遇到不少問題，很多問題都在網上能找到答案，但今天遇的這個問題在網上找了半天也沒找到解決方法。經過半天思索現將我找到的辦法寫出來，為需要的朋友提供一點幫助。在專案中要設定DataGridView 控制元件中Da

jQuery MiniUI 開發教程樹形控制元件建立樹：樹形結構（一）

[b]建立樹：樹形結構[/b][img]http://www.miniui.com/docs/api/images/tree.gif[/img]參考示例：[url=http://www.miniui.com/demo/tree/tree.html]Tree 樹形控制元件[/u

dropdownlist控制元件如何繫結動態資料

一、dropdownlist控制元件的值繫結方法： 1、直接輸入item項 <asp:DropDownList ID="DropDownList1" runat="server" > <asp:ListItem>張三</asp:ListItem> <asp:Li

AjaxPanel自定義控制元件實現頁面無重新整理資料互動(做了個示例程式, 效果確實比較Cool, 用法非常簡單! )(示例程式碼下載)

(一) . 簡要 AjaxPanel, 一個自定義控制元件, 只要在頁面中將AjaxPanel作為父控制元件, 則它內部的控制元件在執行時無重新整理. 做了個程式試了一下果然比較Cool ! 下面介紹一下具體配置, 配置也比較簡單.

C#使用splitContainer控制元件製作收縮展開面板

最近對Squid Ink公司的一款PC端軟體系統上的一個收縮伸展面板很感興趣，加上自己做的噴碼機資料管理系統的介面非常單調，想在現在介面的基礎上將這個功能加上去。我個人只是寫c#的一個菜鳥，在網上查了C#的很多控制元件，很多人都是用GroupBox和Spli

C++ Builder XE8 安卓開發之使用TIdThreadComponent控制元件接收客戶端的資料

C++ Builder中自帶了indy10控制元件，由於indy10的TCPClient接收方式是阻塞式的，所以需要一個執行緒來接收資料。 indy10本身有一個執行緒控制元件：把它放在介面中就可以使用了。我是在OnRun函式中新增自己的程式碼，雖然可以成功執行，

wpf 控制元件的依賴屬性和資料繫結

今天我遇到一個問題就是想動態的改變繫結的源，但是卻提示繫結裡面不能有繫結，我頓時無語了，剛接觸到wpf怎麼辦呢，我真的不知道了，後來為了響應事件的操作，我只好解繫結改變path的值後再繫結。之後也能調轉換器達到想要的結果，可是這樣卻出現了另外一個問題就是：重新

Winform中listView控制元件從資料庫中新增資料的方法

繫結資料庫資料到listview中，有兩種方式第一種：使用SqlDateReader public void BindData() {//連線資料庫string strcon="server=.;database=student;uid=sa;pwd=123456;";S

Android拖動，縮放，自定義內容，控制元件製作（可拖動縮放RelativeLayout定製）

先上效果圖：一. 製作此控制元件的起源專案需要一個可以拖動的控制元件，在網上可以找到很多例子，有圖片拖動控制元件，有textview拖動控制元件。但是專案中需要控制元件同時可以動態通過手指調整尺寸，並且控制元件的內容不固定，需要自定義內容，即可以新增任意內容

WPF/Blend4之自定義控制元件——製作自己的Button

先展示一下效果圖先用Ellipse控制元件畫一個30*30的橢圓，找到畫筆屬性Fill，選擇下面的漸變畫筆，左下角選擇徑向漸變，起始顏色設成#FFFF0000，結束顏色設成#FFFFC8C8 右鍵點Ellipse選擇構成控制元件選擇Button，確定，進入Butt

MFC的WebBrowser控制元件 C++與JavaScript之間資料互動傳遞

----------------------------------------------------------------------------------------------------------------------------------------

（四十七）c#Winform自定義控制元件-樹表格（treeGrid）

前提入行已經7,8年了，一直想做一套漂亮點的自定義控制元件，於是就有了本系列文章。 GitHub：https://github.com/kwwwvagaa/NetWinformControl 碼雲：https://gitee.com/kwwwvagaa/net_winform_custom_contr

CMFCToolBar::ReplaceButton() 替換CMFCToolBarMenuButton控制元件點選按鈕彈出選單問題

最近使用MFC單文件做了一個專案，需要用到CMFCToolBar由於自己的按鈕是在太多了，所有又把相同的按鈕歸類也就是把相同的按鈕放在一個按鈕下，在點選這個按鈕的時候彈出合併的所有選項問題1:在我點選有下拉項的按鈕右側(三角符號部分)時才會彈出

WPF 新增winform控制元件，不支援右鍵選單的解決方法

Datagridview.ContextMenuStrip = contextMenuStripDatagrid; contextMenuStripDatagrid.Items.AddRange(new System.Windows.Forms.ToolStr

使用zTree控制元件製作的表格形式的樹形+資料選單

相關推薦