Jquery-zTree的基本用法

時間 2019-11-06

標籤 jquery ztree 基本用法欄目 JQuery 简体版

原文原文鏈接

【簡介】 javascript

zTree 是利用 JQuery 的核心代碼，實現一套能完成大部分經常使用功能的 Tree 插件 css

兼容 IE、FireFox、Chrome 等瀏覽器

在一個頁面內可同時生成多個 Tree 實例

支持 JSON 數據

支持一次性靜態生成和 Ajax 異步加載兩種方式

支持多種事件響應及反饋

支持 Tree 的節點移動、編輯、刪除

支持任意更換皮膚 / 個性化圖標（依靠css）

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

簡單的參數配置實現靈活多變的功能

【官網】 html

官網地址：http://www.baby666.cn/hunter/index.html java

在官網可以下載到zTree的源碼、實例和API，其中做者pdf的API寫得很是詳細（中文的哦） node

【部分函數和屬性介紹】 jquery

核心：zTree(setting, [zTreeNodes])

這個函數接受一個JSON格式的數據對象setting和一個JSON格式的數據對象zTreeNodes，從而創建 Tree。 ajax

核心參數：setting

zTree 的參數配置都在這裏完成，簡單的說：樹的樣式、事件、訪問路徑等都在這裏配置 json

setting 舉例: 瀏覽器

Js代碼

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

由於參數太多，具體參數詳見zTreeAPI 數據結構

核心參數：zTreeNodes

zTree 的所有節點數據集合，採用由JSON對象組成的數據結構，簡單的說：這裏使用Json格式保存了樹的全部信息

zTreeNodes的格式分爲兩種：利用Json格式嵌套體現父子關係和Array簡單格式

①帶有父子關係的標準 zTreeNodes 舉例:

Js代碼

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

②帶有父子關係的簡單 Array 格式(isSimpleData)的 zTreeNodes 舉例：

Js代碼

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"},
......
];

【實例一】(Java代碼)

①在頁面引用zTree的js和css：

Html代碼

<link rel="stylesheet" href="<%=root%>/Web/common/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="<%=root%>/Web/common/js/jquery-ztree-2.5.min.js"></script>

②在script腳本中定義setting和zTreeNodes

Java代碼

var setting = {
isSimpleData : true, //數據是否採用簡單 Array 格式，默認false
treeNodeKey : "id", //在isSimpleData格式下，當前節點id屬性
treeNodeParentKey : "pId", //在isSimpleData格式下，當前節點的父節點id屬性
showLine : true, //是否顯示節點間的連線
checkable : true //每一個節點上是否顯示 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"},
];

③在進入頁面時生成樹結構：

Js代碼

var zTree;

Js代碼

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

【實例二】(從後臺獲取簡單格式Json數據)

①後臺代碼封裝簡單格式Json數據：

Java代碼

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轉換成Json格式
response.getWriter().print(JSONArray.fromObject(lstTree).toString());
}

②頁面使用Ajax獲取zTreeNodes數據再生成樹

Js代碼

var setting = {
isSimpleData : true, //數據是否採用簡單 Array 格式，默認false
treeNodeKey : "id", //在isSimpleData格式下，當前節點id屬性
treeNodeParentKey : "pId", //在isSimpleData格式下，當前節點的父節點id屬性
showLine : true, //是否顯示節點間的連線
checkable : true //每一個節點上是否顯示 CheckBox
};
var zTree;
var treeNodes;
$(function(){
$.ajax({
async : false,
cache:false,
type: 'POST',
dataType : "json",
url: root+"/ospm/loginInfo/doGetPrivilegeTree.action",//請求的action路徑
error: function () {//請求失敗處理函數
alert('請求失敗');
},
success:function(data){ //請求成功後處理函數。
alert(data);
treeNodes = data; //把後臺封裝好的簡單Json格式賦給treeNodes
}
});
zTree = $("#tree").zTree(setting, treeNodes);
});

【實例三】從後臺動態獲取數據，樹節點提供右鍵菜單功能

①配置setting：

Js代碼

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

②配置鼠標右鍵事件，顯示右鍵菜單的代碼

Js代碼

//顯示右鍵菜單
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();
}
//鼠標右鍵事件-建立右鍵菜單
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);
}
}
}

Js代碼

<p><span style="background-color: #fafafa;">
<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></span></p>

③頁面加載時生成樹而且監聽鼠標點擊事件，及時隱藏右鍵菜單

Js代碼

function reloadTree() {
hideRMenu();
zTree = $("#tree").zTree(setting, treeNodes);
}
var zTree;
var treeNodes = [];
$(function() {
reloadTree();
$("body").bind(//鼠標點擊事件不在節點上時隱藏右鍵菜單
"mousedown",
function(event) {
if (!(event.target.id == "rMenu" || $(event.target)
.parents("#rMenu").length > 0)) {
$("#rMenu").hide();
}
});
});

④後臺代碼根據id獲取樹節點信息

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

Java代碼

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層-----------------------

Java代碼

/**
* 根據節點id，查詢其下級節點的數據
*/
@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);
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。