69久久精品无码一区二区,精品伊人久久久99热这里只,亚洲欧美四级在线播放

【簡(jiǎn)介】

zTree 是利用 JQuery 的核心代碼，實(shí)現(xiàn)一套能完成大部分常用功能的 Tree 插件

?兼容 IE、FireFox、Chrome 等瀏覽器

?在一個(gè)頁(yè)面內(nèi)可同時(shí)生成多個(gè) Tree 實(shí)例

?支持 JSON 數(shù)據(jù)

?支持一次性靜態(tài)生成和 Ajax 異步加載兩種方式

?支持多種事件響應(yīng)及反饋

?支持 Tree 的節(jié)點(diǎn)移動(dòng)、編輯、刪除

?支持任意更換皮膚 / 個(gè)性化圖標(biāo)（依靠css）

?支持極其靈活的 checkbox 或 radio 選擇功能

?簡(jiǎn)單的參數(shù)配置實(shí)現(xiàn) 靈活多變的功能

zTree博客地址： http://ztreeapi.iteye.com/

目前zTree作者已經(jīng)入駐ItEye，如果有什么需要學(xué)習(xí)的完全可以到作者博客上去學(xué)習(xí)，而且zTree的版本已經(jīng)更新了很多次了，下面的內(nèi)容跟最新版估計(jì)會(huì)有很大出入，我不能保證下面的教程在最新版可用。zTree真的是非常強(qiáng)大的樹組件，希望能對(duì)大家有所幫助！

在官網(wǎng)能夠下載到zTree的源碼、實(shí)例和API，其中作者pdf的API寫得非常詳細(xì)（中文的哦）

?【部分函數(shù)和屬性介紹】

核心：zTree(setting, [zTreeNodes])

這個(gè)函數(shù)接受一個(gè)JSON格式的數(shù)據(jù)對(duì)象setting和一個(gè)JSON格式的數(shù)據(jù)對(duì)象zTreeNodes，從而建立 Tree。

核心參數(shù)：setting

zTree 的參數(shù)配置都在這里完成，簡(jiǎn)單的說(shuō)：樹的樣式、事件、訪問(wèn)路徑等都在這里配置

setting 舉例:

    var setting = { 
????showLine: true, 
????checkable: true 
};

因?yàn)閰?shù)太多，具體參數(shù)詳見(jiàn)zTreeAPI

核心參數(shù)：zTreeNodes

zTree 的全部節(jié)點(diǎn)數(shù)據(jù)集合，采用由JSON對(duì)象組成的數(shù)據(jù)結(jié)構(gòu)，簡(jiǎn)單的說(shuō)：這里使用Json格式保存了樹的所有信息

zTreeNodes的格式分為兩種：利用Json格式嵌套體現(xiàn)父子關(guān)系和Array簡(jiǎn)單格式

①帶有父子關(guān)系的標(biāo)準(zhǔn) zTreeNodes 舉例:

    var zTreeNodes = [ 
????{"id":1, "name":"test1", "nodes":[ 
??????{"id":11, "name":"test11", "nodes":[ 
????????{"id":111, "name":"test111"} 
??????]}, 
??????{"id":12, "name":"test12"} 
????]}, 
????...... 
];

②帶有父子關(guān)系的簡(jiǎn)單 Array 格式(isSimpleData)的 zTreeNodes 舉例：

    var treeNodes = [                                                                       
????{"id":1, "pId":0, "name":"test1"}, 
????{"id":11, "pId":1, "name":"test11"}, 
????{"id":12, "pId":1, "name":"test12"}, 
????{"id":111, "pId":11, "name":"test111"}, 
????...... 
];

【實(shí)例一】(Java代碼)

①在頁(yè)面引用zTree的js和css：

    <!-- ZTree樹形插件 -->
<link rel="stylesheet" href="<%=root%>/Web/common/css/zTreeStyle/zTreeStyle.css" type="text/css">
<!-- <link rel="stylesheet" href="<%=root%>/Web/common/css/zTreeStyle/zTreeIcons.css" type="text/css">  -->
<script type="text/javascript" src="<%=root%>/Web/common/js/jquery-ztree-2.5.min.js"></script>

②在script腳本中定義setting和zTreeNodes

    var setting = {
		isSimpleData : true,              //數(shù)據(jù)是否采用簡(jiǎn)單 Array 格式，默認(rèn)false
		treeNodeKey : "id",               //在isSimpleData格式下，當(dāng)前節(jié)點(diǎn)id屬性
		treeNodeParentKey : "pId",        //在isSimpleData格式下，當(dāng)前節(jié)點(diǎn)的父節(jié)點(diǎn)id屬性
		showLine : true,                  //是否顯示節(jié)點(diǎn)間的連線
		checkable : true                  //每個(gè)節(jié)點(diǎn)上是否顯示 CheckBox
	};

var treeNodes = [ 
????{"id":1, "pId":0, "name":"test1"}, 
????{"id":11, "pId":1, "name":"test11"}, 
????{"id":12, "pId":1, "name":"test12"}, 
????{"id":111, "pId":11, "name":"test111"}, 
];

?③在進(jìn)入頁(yè)面時(shí)生成樹結(jié)構(gòu)：

    var zTree;

    $(function() {
	zTree = $("#tree").zTree(setting, treeNodes);
 });

?④最后查看效果：

【實(shí)例二】(從后臺(tái)獲取簡(jiǎn)單格式Json數(shù)據(jù))

①后臺(tái)代碼封裝簡(jiǎn)單格式Json數(shù)據(jù)：

    public void doGetPrivilegeTree() throws IOException{
		String s1 = "{id:1, pId:0, name:\"test1\" , open:true}";
		String s2 = "{id:2, pId:1, name:\"test2\" , open:true}";
		String s3 = "{id:3, pId:1, name:\"test3\" , open:true}";
		String s4 = "{id:4, pId:2, name:\"test4\" , open:true}";
		List<String> lstTree = new ArrayList<String>();
		lstTree.add(s1);
		lstTree.add(s2);
		lstTree.add(s3);
		lstTree.add(s4);
		//利用Json插件將Array轉(zhuǎn)換成Json格式
		response.getWriter().print(JSONArray.fromObject(lstTree).toString());
	}

②頁(yè)面使用Ajax獲取zTreeNodes數(shù)據(jù)再生成樹

    var setting = {
	isSimpleData : true,              //數(shù)據(jù)是否采用簡(jiǎn)單 Array 格式，默認(rèn)false
	treeNodeKey : "id",               //在isSimpleData格式下，當(dāng)前節(jié)點(diǎn)id屬性
	treeNodeParentKey : "pId",        //在isSimpleData格式下，當(dāng)前節(jié)點(diǎn)的父節(jié)點(diǎn)id屬性
	showLine : true,                  //是否顯示節(jié)點(diǎn)間的連線
	checkable : true                  //每個(gè)節(jié)點(diǎn)上是否顯示 CheckBox
};

var zTree;
var treeNodes;

$(function(){
	$.ajax({
		async : false,
		cache:false,
		type: 'POST',
		dataType : "json",
		url: root+"/ospm/loginInfo/doGetPrivilegeTree.action",//請(qǐng)求的action路徑
		error: function () {//請(qǐng)求失敗處理函數(shù)
			alert('請(qǐng)求失敗');
		},
		success:function(data){ //請(qǐng)求成功后處理函數(shù)。  
			alert(data);
			treeNodes = data;   //把后臺(tái)封裝好的簡(jiǎn)單Json格式賦給treeNodes
		}
	});

	zTree = $("#tree").zTree(setting, treeNodes);
});

?③最后顯示效果

【實(shí)例三】從后臺(tái)動(dòng)態(tài)獲取數(shù)據(jù)，樹節(jié)點(diǎn)提供右鍵菜單功能

①配置setting：

    var url = "/ospm/loginInfo/doGetPrivilegeTree.action";
	//zTree基本設(shè)置
	var setting = {
		async : true, //需要采用異步方式獲取子節(jié)點(diǎn)數(shù)據(jù),默認(rèn)false
		asyncUrl : root + url, //當(dāng) async = true 時(shí)，設(shè)置異步獲取節(jié)點(diǎn)的 URL 地址 ,允許接收 function 的引用
		asyncParam : ["id"], //提交的與節(jié)點(diǎn)數(shù)據(jù)相關(guān)的必需參數(shù)
		isSimpleData : true, //數(shù)據(jù)是否采用簡(jiǎn)單 Array 格式，默認(rèn)false
		treeNodeKey : "id", //在isSimpleData格式下，當(dāng)前節(jié)點(diǎn)id屬性
		treeNodeParentKey : "parentId", //在isSimpleData格式下，當(dāng)前節(jié)點(diǎn)的父節(jié)點(diǎn)id屬性
		nameCol : "privName",            //在isSimpleData格式下，當(dāng)前節(jié)點(diǎn)名稱
		expandSpeed : "fast", //設(shè)置 zTree節(jié)點(diǎn)展開、折疊時(shí)的動(dòng)畫速度或取消動(dòng)畫(三種默認(rèn)定義："slow", "normal", "fast")或 表示動(dòng)畫時(shí)長(zhǎng)的毫秒數(shù)值(如：1000) 
		showLine : true, //是否顯示節(jié)點(diǎn)間的連線
		callback : { //回調(diào)函數(shù)
			rightClick : zTreeOnRightClick   //右鍵事件
		}
	};

②配置鼠標(biāo)右鍵事件，顯示右鍵菜單的代碼

    //顯示右鍵菜單
	function showRMenu(type, x, y) {
		$("#rMenu ul").show();
		if (type=="root") {
			$("#m_del").hide();
			$("#m_check").hide();
			$("#m_unCheck").hide();
		}
		$("#rMenu").css({"top":y+"px", "left":x+"px", "display":"block"});
	}
	//隱藏右鍵菜單
	function hideRMenu() {
		$("#rMenu").hide();
	}
	
	//鼠標(biāo)右鍵事件-創(chuàng)建右鍵菜單
	function zTreeOnRightClick(event, treeId, treeNode) {
		if (!treeNode) {
			zTree.cancelSelectedNode();
			showRMenu("root", event.clientX, event.clientY);
		} else if (treeNode && !treeNode.noR) { //noR屬性為true表示禁止右鍵菜單
			if (treeNode.newrole && event.target.tagName != "a" && $(event.target).parents("a").length == 0) {
				zTree.cancelSelectedNode();
				showRMenu("root", event.clientX, event.clientY);
			} else {
				zTree.selectNode(treeNode);
				showRMenu("node", event.clientX, event.clientY);
			}
		}
	}

    
      
        <!-- 右鍵菜單div --> ?<div id="rMenu" style="position:absolute; display:none;"> ?<li> ?<ul id="m_add" onclick="addPrivilege();"><li>增加</li></ul> ?<ul id="m_del" onclick="delPrivilege();"><li>刪除</li></ul> ?<ul id="m_del" onclick="editPrivilege();"><li>編輯</li></ul> ?<ul id="m_del" onclick="queryPrivilege();"><li>查看</li></ul> ?</li> ?</div>

?③頁(yè)面加載時(shí)生成樹并且監(jiān)聽鼠標(biāo)點(diǎn)擊事件，及時(shí)隱藏右鍵菜單

    function reloadTree() {
		hideRMenu();
		zTree = $("#tree").zTree(setting, treeNodes);
	}	
	
	var zTree;
	var treeNodes = [];
	

$(function() {
		reloadTree();

		$("body").bind(//鼠標(biāo)點(diǎn)擊事件不在節(jié)點(diǎn)上時(shí)隱藏右鍵菜單
				"mousedown",
				function(event) {
					if (!(event.target.id == "rMenu" || $(event.target)
							.parents("#rMenu").length > 0)) {
						$("#rMenu").hide();
					}
				});
	});

④后臺(tái)代碼根據(jù)id獲取樹節(jié)點(diǎn)信息

-----------------------Action層-----------------------

    public void doGetPrivilegeTree() throws IOException{
		String sId = request.getParameter("id");
		int treeId = 0;
		if(sId!=null&&!"".equals(sId)){
			treeId = Integer.parseInt(sId);
		}
		List<Privilege> lstPriv = privilegeService.findPrivilegeTreeById(treeId);
		response.setCharacterEncoding("UTF-8");
		response.getWriter().print(JSONArray.fromObject(lstPriv).toString());
	}

-----------------------Service層-----------------------

    /**
	 * 根據(jù)節(jié)點(diǎn)id，查詢其下級(jí)節(jié)點(diǎn)的數(shù)據(jù)
	 */
	@SuppressWarnings("unchecked")
	@Override
	public List<Privilege> findPrivilegeTreeById(int treeId) {
		StringBuffer sbTree= new StringBuffer();
		sbTree.append("SELECT NEW Privilege(p.id,p.privName,p.description,p.status,p.isLeaf,p.parentId) FROM Privilege p ");
		sbTree.append("WHERE p.parentId=:treeId ");
		sbTree.append("AND p.status!=:del ");
		
		Map<String,Object> mapTree = new HashMap<String, Object>();
		mapTree.put("treeId", treeId);
		mapTree.put("del", Privilege.PRIV_STATUS_DELETE);
		
		return (List<Privilege>) privilegeDao.findByHql(sbTree.toString(), mapTree);
	}

?⑤最后查看效果：

Jquery-zTree的基本用法

更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主

微信掃碼或搜索：z360901061

微信掃一掃加我為好友

QQ號(hào)聯(lián)系： 360901061

您的支持是博主寫作最大的動(dòng)力，如果您喜歡我的文章，感覺(jué)我的文章對(duì)您有幫助，請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長(zhǎng)非常感激您！手機(jī)微信長(zhǎng)按不能支付解決辦法：請(qǐng)將微信支付二維碼保存到相冊(cè)，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。

【本文對(duì)您有幫助就好】元

2元

5元

10元

20元

自定義

亚洲免费在线-亚洲免费在线播放-亚洲免费在线观看-亚洲免费在线观看视频-亚洲免费在线看-亚洲免费在线视频