【zTree】zTree開發使用說明【20140610】

時間 2019-11-10

標籤 zTree ztree 開發使用說明简体版

原文原文鏈接

使用條件:javascript

使用zTree樹形結構，須要在當前頁面中載入zTree的js文件和樣式文件css

zTree核心js文件:jquery.ztree-2.6.jshtml

zTree樣式文件:java

由於zTree是基於jquery，因此還須要對應的jQuery庫文件node

將這些文件引入使用頁面:jquery

<linkrel="stylesheet"href="css/zTreeStyle.css"type="text/css">ajax

<scripttype="text/javascript"src="js/jquery-1.4.2.js"></script>json

<scripttype="text/javascript"src="js/jquery.ztree-2.6.js"></script>api

簡單使用:數組

用戶須要在頁面上新建一個tree對象，須要使用

var zTree = $("#tree").zTree(setting, zTreeNodes);

$("#tree")是獲取頁面上一個id爲tree的<ul>元素

zTree()方法是加載樹形結構，它須要兩個參數，一個爲setting,zTree的參數配置數據,json數據格式

另外一個爲zTreeNodes ，其實這個參數是可選的，由於數據是放在setting對象的root屬性下，若是root屬性下已經存在數據，則能夠不用再加載數據對象，例如異步加載數據後，從新加載樹形結構的時候，便不須要再指定數據對象。

zTree 的數據參數,json數據格式

而var zTree 是建立樹形結構後返回的一個jQuery對象，以後操做樹形結構所有操做這個對象便可。

完整代碼爲：

<html>

<head>

<title>這裏是測試頁面</title>

<linkrel="stylesheet"href="css/zTreeStyle.css"type="text/css">

<scripttype="text/javascript"src="js/jquery-1.4.2.js"></script>

<scripttype="text/javascript"src="js/jquery.ztree-2.6.js"></script>

<scripttype="text/javascript">

var setting = {

showLine: false, //是否顯示線，true爲顯示，false爲不顯示

checkable: true,//是否有可選框，true爲可選，false爲不可選

showIcon : false//是否有圖標，true爲有，false爲沒有，默認爲true

};

//新建數據對象，json數據格式

var zTreeNodes1 = [

{ name:"手機", open:false, checked:true,

nodes: [

{ name:"諾基亞", isParent:true},

{ name:"三星"},

{ name:"索愛"},

{ name:"多普達"}

]},

{ name:"電腦", open:true, checked:true,

nodes: [

{ name:"硬件", checked:true},

{ name:"整機", isParent:true, checked:true},

{ name:"網絡", checked:true}

]},

{ name:"家電", open:false,

nodes: [

{ name:"電視", checked:true},

{ name:"冰箱"},

{ name:"空調", isParent:true}

]}

];

</script>

</head>

<body>

</body>

<scripttype="text/javascript">

var zTree = $("#tree").zTree(setting, zTreeNodes1);

</script>

</html>

運行結果便如:

Setting對象經常使用屬性說明:

var setting = {

isSimpleData :true, //是否使用簡單的數組結構

treeNodeKey :"id", //使用簡單數組結構必須制定的節點自身id

treeNodeParentKey : "pId", //使用簡單數組結構必須指定的父節點id

showLine:false, //是否顯示線，true爲顯示，false爲不顯示

checkable:true, //是否有可選框，true爲可選，false爲不可選

showIcon :false, //是否有圖標，true爲有，false爲沒有，默認爲true

callback : {

click: zTreeOnClick //回調函數，須要重寫這個回調函數

}

};

若是使用簡單數組格式，數據對象的格式便須要以下:

//數據對象，經過pId字段指定上級目錄

var zTreeNodes3 = [

{"id":1,"pId":0, "name":"test1"},

{"id":11,"pId":1, "name":"test11"},

{"id":12,"pId":1, "name":"test12"},

{"id":111,"pId":11, "name":"test111"},

{"id":112,"pId":11, "name":"test222"},

{"id":113,"pId":11, "name":"test3"}

];

完整代碼以下:

<html>

<head>

<metahttp-equiv="pragma"content="no-cache">

<metahttp-equiv="cache-control"content="no-cache">

<metahttp-equiv="expires"content="0">

<linkrel="stylesheet"href="css/zTreeStyle.css"type="text/css">

<scripttype="text/javascript"src="js/jquery-1.4.2.js"></script>

//新建一個配置對象，json數據格式

var setting = {

isSimpleData :true, //是否使用簡單的數組結構

treeNodeKey :"id", //使用簡單數組結構必須制定的節點自身id

treeNodeParentKey :"pId", //使用簡單數組結構必須指定的父節點id

showLine:false, //是否顯示線，true爲顯示，false爲不顯示

checkable:true, //是否有可選框，true爲可選，false爲不可選

showIcon :false, //是否有圖標，true爲有，false爲沒有，默認爲true

callback : {

click: zTreeOnClick //回調函數，協議重寫這個回調函數

}

};

//回調函數：zTreeOnClick，當用戶點擊樹形結構的節點時觸發

function zTreeOnClick(event, treeId, treeNode) {

//treeNode爲用戶點擊的節點

alert(treeNode.tId +", " + treeNode.name);

}

//數據對象2，簡易數據結構

var zTreeNodes2 = [

{"id":1,"pId":0, "name":"test1","open":true},

{"id":11,"pId":1, "name":"test11","open":true},

{"id":12,"pId":1, "name":"test12"},

{"id":111,"pId":11, "name":"test111"},

{"id":112,"pId":11, "name":"test222"},

{"id":113,"pId":11, "name":"test3"}

];

</script>

</head>

<body>

</body>

<scripttype="text/javascript">

var zTree = $("#tree").zTree(setting, zTreeNodes2);

</script>

</html>

運行效果便如:

而由於重寫了zTreeOnClick回調函數，因此點擊節點的時候，會觸發回調函數

數據對象屬性介紹

checked:當 setting.checkable = true時有效，設定節點的 CheckBox 是否被勾選,默認是 false

Click:設定節點在鼠標點擊後作的事情，至關於 onclick="...."的內容，可用於一些簡單操做，若是過於複雜的，建議經過 click事件進行控制處理

Icon:設定節點的自定義圖標，以替換 css樣式中配置的普通圖標。（設定時請注意指定圖標的相對路徑是否正確）

Name:節點顯示的名稱。

Open:設置父節點初始化展開狀態。

對於不須要異步獲取子節點信息的父節點有效。

Target:對於存在url屬性的節點，設置點擊後跳轉的目標，同超連接的 target 屬性（"_blank", "_self"等）

Url:指定節點被點擊後的跳轉頁面 URL地址

經常使用方法介紹：

其中zTree是加載樹形結構以後返回的對象

function ceshi(){

//從新加載樹形結構，能夠指定另外的setting對象和另外的

數據對象，進行從新加載

var zTree = $("#tree").zTree(setting2, zTreeNodes3);

//獲取勾選狀態改變的節點集合

var nodes = zTree.getChangeCheckedNodes();

//獲取被選中的節點集合

var nodes = zTree.getCheckedNodes();

//獲取id爲111的節點，這裏是精確獲取

var node = zTree.getNodeByParam("id",111);

//獲取name中包含"abc"的節點，模糊查詢，

var nodes = zTree.getNodesByParamFuzzy("name","abc", node);

//添加新的節點,添加新的數據對象到指定的父節點下，其中parentNode爲欲添加的父節點，若是要在根節點目錄下添加，則指定parentNode爲null

zTree.addNodes(parentNode,newNodes);

//獲取被選中的節點

var selectedNode = zTree.getSelectedNode();

}

經過ajax異步獲取數據

<html>

<head>

<basehref="<%=basePath%>">

<title>這是測試樹形結構</title>

<metahttp-equiv="pragma"content="no-cache">

<metahttp-equiv="cache-control"content="no-cache">

<metahttp-equiv="expires"content="0">

<linkrel="stylesheet"href="css/zTreeStyle.css"type="text/css">

<scripttype="text/javascript"src="js/jquery-1.4.2.js"></script>

var zTree1;

var setting = {

checkable:true,

async:true,//容許異步獲取數據

asyncUrl:"", //獲取節點數據的URL地址

asyncParam: ["name","id"], //獲取節點數據時，必須的數據名稱，例如：id、name

asyncParamOther: [] //其它參數 ( key, value鍵值對格式)

};

//初始化時的數據對象

var zNodes =[

{"name":"google","url":"http://g.cn","target":"_blank","click":"alert('myname')"},

{"name":"baidu","url":"http://baidu.com","target":"_blank"},

{"name":"sina","url":"http://www.sina.com.cn","target":"_blank"}

];

//該方法用於預處理異步獲取的數據，其中的childNodes即是異步獲取的數據對象

function dataFilter(treeId, parentNode, childNodes) {

//將初始化時的數據對象賦予一個變量

var nodes = zNodes;

if (childNodes) {

for(var i =0; i<childNodes.length; i++) {

//將新獲取的數據對象一個個的加入nodes中

nodes.push(childNodes[i]);

}

//返回數據對象

return nodes;

}

function refreshTree(asyncUrl) {

//設置異步獲取數據的地址，還能夠是setting.asyncUrl = "data/note.txt"等，不止限於服務器獲取

setting.asyncUrl ="testAction_huoqu.action";

//設定異步獲取數據後使用dataFilter方法進行數據處理

setting.asyncDataFilter = dataFilter;

//從新加載，這裏不須要再指定數據對象

zTree1 = $("#treeDemo").zTree(setting);

}

</script>

</head>

<body>

</body>

<scripttype="text/javascript">

zTree1 = $("#treeDemo").zTree(setting, zNodes);

</script>

</html>

服務器端代碼：

Struts2代碼

public String huoqu(){

JSONArray jsonArray =new JSONArray();

JSONObject one =new JSONObject();

one.put("name","魔獸世界");

one.put("url","www.wow.com");

one.put("target","_blank");

JSONObject two =new JSONObject();

two.put("name","劍俠情緣");

two.put("url","www.jianxia.com");

two.put("target","_blank");

JSONObject three =new JSONObject();

three.put("name","傳奇");

three.put("url","www.mir2.com");

three.put("target","_blank");

jsonArray.add(one);

jsonArray.add(two);

jsonArray.add(three);

HttpServletResponse response = ServletActionContext.getResponse();

//返回頁面的信息爲utf-8編碼，不加這個提示信息就會變成亂碼

response.setCharacterEncoding("utf-8");

//返回頁面的信息爲html/text格式，不加這個返回頁面的信息就會是整個頁面

response.setContentType("html/text");

//將信息經過ajax返回

PrintWriter out =null;

try {

out = response.getWriter();

out.print(jsonArray.toString());

out.flush();

out.close();

} catch (IOException e) {

// TODO Auto-generated catch block

e.printStackTrace();

}

return"testZTreePage";

}

詳情請查看api

相關標籤/搜索

freemarker+ztree+layui

vue+chosen+ztree

bootstrap+ztree+lodash+jquery

每日一句

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