2. 程式人生 > >jquery——zTree, 完美好用的樹外掛

jquery——zTree, 完美好用的樹外掛

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

Demo

這絕對是我見過最完美的tree了，雖然是國產貨，但一點不輸國外產品，國外的還沒有見過這麼強的。

__________________________________________________________________________________

下面是簡單的使用demo:

<!DOCTYPE html>
<html>
<head>
    <title>ZTREE DEMO - Standard Data </title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link href="css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
    <script src="js/jquery.ztree.core-3.4.js" type="text/javascript"></script>
    <script type="text/javascript">
		var setting = {
		    view: {
		        selectedMulti: false        //禁止多點選中
	        },
		    data: {
			    simpleData: {
				    enable:true,
				    idKey: "id",
				    pIdKey: "pId",
				    rootPId: ""
			    }
		    },
		    callback: {
			    onClick: function(treeId, treeNode) {
				    var treeObj = $.fn.zTree.getZTreeObj(treeNode);
                    var selectedNode = treeObj.getSelectedNodes()[0];
                    $("#txtId").val(selectedNode.id);
                    $("#txtAddress").val(selectedNode.name);
			    }
		    }
		};
		var zNodes =[
			{id:1, pId:0, name:"廣東", open:true},
		    {id:101, pId:1, name:"廣州", file:"core/standardData"},
		    {id:102, pId:1, name:"深圳", file:"core/simpleData"},
		    {id:103, pId:1, name:"東莞", file:"core/noline"}
		];

		$(document).ready(function(){
			$.fn.zTree.init($("#treeDemo"), setting, zNodes);
		});
	</script>
</head>
<body>
    <div style="float:left;" >
        <ul id="treeDemo" class="ztree">
        </ul>
    </div>
    <div style="float:left;" >
        id: <input id="txtId" type="text" value="" /><br />
        地名：<input id="txtAddress" type="text" value="" />
    </div>
</body>
</html>

相關推薦

jquery——zTree, 完美好用的樹外掛

Demo 這絕對是我見過最完美的tree了，雖然是國產貨，但一點不輸國外產品，國外的還沒有見過這麼強的。 __________________________________________________________________________________ 下

Android好用的外掛

1.Android Resource Usage Count 顧名思義，這是一個可以顯示 Android 資源使用次數的外掛，產品或者設計經常需要改動一個 string 或者 color，在改動之前你得先手動在那個資原始檔上右鍵 - Find Usage , 引用次數為 1 就直接改動

Chorme中好用的外掛

Chorme使用也有一年的時間了，就來分享一下Chorme中好用的外掛，首先涉及到國家的政策原因，就不介紹VPN了。 1.oneTab的外掛，這個外掛對我來說很有用，如果你想要查詢一個問題，當然你需要貨比三家，這時候就有很多的搜尋框被開啟，這裡看起來就不簡潔而且你不知道那個是你想要

IDEA好用的外掛推薦

推薦外掛： 類別 外掛名稱 用途 部署 JRebel for IntelliJ 商業熱部署外掛，需要許可證 日誌 Grep Console 自定義設定控制

非常好用的外掛之IntelliJ IDEA lombok外掛的安裝和使用

一、lombok的介紹      lombok是開源的程式碼生成庫，是一款非常實用的小工具，我們在編輯實體類時可以通過lombok註解減少getter、setter等方法的編寫，在更改實體類時只需要修改屬性即可，減少了很多重複程式碼的編寫

IDEA-推薦幾款好用的外掛

1 RestfulToolkit Java WEB開發必備，再也不用全域性搜尋RequestMapping了。 2 Lombok Plugin 使用註解自動生成程式碼，碼奴解放者。 3 Grep Console 高亮log不同級別日誌，看日誌的時候一目瞭

JavaScript：VSCode那些好用的外掛

Auto Close Tag 用途：自動閉合HTML/XML標籤 Auto Rename Tag 用途：自動完成另一側標籤的同步修改 Beautify 用途：格式化程式碼 用法：我喜歡Ctrl + shift + P 然後用滑鼠選beautify file，有更

VS：VS2017的基礎設定、好用的外掛以及常用的快捷鍵

最近要將VC6.0中的老工程移植到VS2017當中，寫篇部落格記錄一下VS2017的基本配置、好用的外掛以及一些常用的快捷方式，方便日後檢視。 一、基本配置 1、窗口布局：類檢視、資源檢視、解決方案資源管理器、輸出視窗（可以自動隱藏）。 二、外掛 1、Astyle

idea 好用的外掛，和命令

http://www.oschina.net/news/69858/java-developer-need-intellij-idea-plugin   好用的外掛 命令 keytool -genkey -alias tomcat  -storetype PKCS1

收集的一些idea好用的外掛

1，.IGNORE 2，lombok 3，p3c 4，FindBugs的-IDEA 5，GsonFormat 6，Maven Helper 7，VisualVM Launcher 8，GenerateAllSetter 9，MyBatisCodeHelpe

idea 非常好用的外掛

1: Free Mybatis plugin一個蠻好用的mybatis外掛,可以通過dao層的介面直接和mapper.xml標籤id進行對映,點選下圖左邊的前頭就可以跳轉到對應的介面或是xml.這種方式只對生成代理介面有效,對於通過session.select()的全路徑的實

Firefox(火狐)好用的外掛

Firefox自帶的開發工具 我們致力於開發一系列包含在Firefox內的開發工具。它們在 Developer Tools in Firefox Aurora 10中有更詳細的描述，有了它們我們就能做出一些很有趣的事。 我們對大量的使用者介面和編碼方式進行測試和評估，從而找出在頁面中最理想的編碼方式。如果你

自制的超好用jQ外掛，彈層，模態視窗外掛

不廢話直接上程式碼 是jqeruy外掛，所以需要先引用jquery。 showMdal.js ;(function($) { $.extend({ //新增背景 modal_bg : function() {

jQuery幾個好用的插件

覆蓋 時間 一個 ryu 目前 分享圖片 n-1 toc let jQuery幾個好用的插件： jQuery Validate：jQuery Validate 插件為表單提供了強大的驗證功能，讓客戶端表單驗證變得更簡單，同時提供了大量的定制選項，滿足應用程序各種需求。

Jetbrains好用的外掛（經驗總結）

Jetbrain好用的外掛（經驗總結） 筆者使用過idea，phpstorm，webstorm，pycharm和goland開發過

推薦一款好用的jquery彈出層外掛——wbox

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！        

前端之路：一款好用的的jQuery前端提示外掛（webui-popover）

  最近專案有點多，日記沒多少時間寫。哈哈。 今天介紹一款好用的提示控制元件  webui-popover 像popover（彈出框）這樣的外掛用處很廣，基本所有的社交網站都有。Bootstrap自帶的popover.js就實現了這個功能。但是在使用了幾天之

用樹展示上下級關係-jquery+ztree+json的運用

    本文是結合前面對fastjson的處理後，在此基礎上來用樹的形式展示後臺資料如圖所示：採用了開源的ztree技術。具體參考：因為ztree的格式支援Json，所以我們就新建了一個Node類【TreeNode.java】/** * TreeNode.java * 版

推薦一個挺好用的jquery外掛，jquery.jqplot.js（畫圖）,此處簡略得說一下折線圖的畫法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html

jQuery-zTree樹外掛 簡單使用及例項

HTML首先我們先放置一個樹ul列表<ul id="treeDemo" class="ztree"></ul>演示一：最簡單的樹 -- 簡單 JSON 資料var setting = {      data: {          simpleData