zTree的使用
最近工程要用到樹形結構，就在網上找到了jquery插件ztree，成功的知足了需求。
需求詳見如上圖
1.從後臺獲取欄目樹數據
2.初始化欄目樹時，層級所有展開
3.支持搜索，點擊"查找"按鈕以後，1>展開搜索到的欄目;2>將搜索到的結果標紅
4.欄目支持多選，下面還有個肯定按鈕，將選中的欄目樹id傳送給後臺
直接上樣例，很詳細的說明
1.ztree官方文檔地址
ztree官網地址
注意查看demo演示與api文檔，很詳細，幾乎能夠知足全部常見需求。
2.代碼樣例
`<!DOCTYPE html>javascript
<html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>ztree demo 2</title> <!--<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css"> --> <link rel="stylesheet" type="text/css" href="./css/demo.css"> <link rel="stylesheet" type="text/css" href="./css/zTreeStyle/zTreeStyle.css"> <style> body { background-color: white; margin: 0; padding: 0; text-align: left; }php
div,
p,
table,
th,
td
{
list-style: none;
margin: 0;
padding: 0;
color: #333;
font-size: 12px;
font-family: dotum, Verdana, Arial, Helvetica, AppleGothic, sans-serif;
}
#testIframe
{
margin-left: 10px;
}
</style>
<script type="text/javascript" src="./js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="./js/bootstrap.min.js"></script>
<script type="text/javascript" src="./js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="./js/jquery.ztree.excheck.js"></script>
<SCRIPT LANGUAGE="JavaScript">
var zTree;
var demoIframe;
var setting =
{
check: {
enable: true,
//父子節點聯動
chkboxType: { "Y": "ps", "N": "ps" }
},
view: {
nameIsHTML: true,
fontCss: setFontCss
},
data: {
simpleData: {
enable: true,
idKey: "id",
pIdKey: "pId",
rootPId: ""
}
},
callback: {
onCheck: onCheckMethod
}
};
var zNodes = [
{
id: 1,
pId: 0,
name: "一級欄目1",
open: true
},
{
id: 100,
pId: 1,
name: "一級欄目1/二級欄目1",
open: true
},
{
id: 101,
pId: 1,
name: "一級欄目1/二級欄目2",
open: true
},
{
id: 2,
pId: 0,
name: "一級欄目2",
open: true
},
{
id: 200,
pId: 2,
name: "一級欄目2/二級欄目1",
open: true
},
{
id: 201,
pId: 2,
name: "一級欄目2/二級欄目2",
open: true
},
{
id: 201001,
pId: 201,
name: "一級欄目2/二級欄目2/小敏",
open: true
},
{
id: 3,
pId: 0,
name: "產品一級",
open: true
},
{
id: 301,
pId: 3,
name: "產品一級/小敏",
open: true
},
{
id: 4,
pId: 0,
name: "新聞",
open: true
},
{
id: 401,
pId: 4,
name: "新聞/輿論",
open: true
},
{
id: 401001,
pId: 401,
name: "新聞/輿論/小敏",
open: true
},
{
id: 5,
pId: 0,
name: "大數據",
open: true
},
{
id: 501,
pId: 5,
name: "大數據/小敏",
open: true
},
];
$(document).ready(function(){
var t = $("#tree");
t = $.fn.zTree.init(t, setting, zNodes);
demoIframe = $("#testIframe");
demoIframe.bind("load", loadReady);
//var zTree = $.fn.zTree.getZTreeObj("tree");
//zTree.selectNode(zTree.getNodeByParam("id", 1));
});
function loadReady() {
var bodyH = demoIframe.contents().find("body").get(0).scrollHeight,
htmlH = demoIframe.contents().find("html").get(0).scrollHeight,
maxH = Math.max(bodyH, htmlH),
minH = Math.min(bodyH, htmlH),
h = demoIframe.height() >= maxH ? minH : maxH;
if(h < 530) h = 530;
demoIframe.height(h);
}
/**
* 展開樹
* [@param](https://my.oschina.net/u/2303379) treeId
*/
function expand_ztree(treeId) {
var treeObj = $.fn.zTree.getZTreeObj(treeId);
treeObj.expandAll(true);
}
/**
* 收起樹：只展開根節點下的一級節點
* [@param](https://my.oschina.net/u/2303379) treeId
*/
function close_ztree(treeId) {
var treeObj = $.fn.zTree.getZTreeObj(treeId);
var nodes = treeObj.transformToArray(treeObj.getNodes());
var nodeLength = nodes.length;
for(var i = 0; i < nodeLength; i++) {
if(nodes[i].id == '0') {
//根節點：展開
treeObj.expandNode(nodes[i], true, true, false);
} else {
//非根節點：收起
treeObj.expandNode(nodes[i], false, true, false);
}
}
}
/**
* 搜索樹，高亮顯示並展現【模糊匹配搜索條件的節點s】
* [@param](https://my.oschina.net/u/2303379) treeId
* [@param](https://my.oschina.net/u/2303379) searchConditionId 文本框的id
*/
function search_ztree(treeId, searchConditionId) {
//1.先清空全部節點的高亮
//2.在搜索
searchByFlag_ztree(treeId, searchConditionId,"");
}
/**
* 搜索樹，高亮顯示並展現【模糊匹配搜索條件的節點s】
* [@param](https://my.oschina.net/u/2303379) treeId
* @param searchConditionId 搜索條件Id
* @param flag 須要高亮顯示的節點標識
*/
function searchByFlag_ztree(treeId, searchConditionId, flag) {
//<1>.搜索條件
var searchCondition = $('#' + searchConditionId).val();
console.log(searchCondition);
//<2>.獲得模糊匹配搜索條件的節點數組集合
var highlightNodes = new Array();
if(searchCondition != "") {
var treeObj = $.fn.zTree.getZTreeObj(treeId);
highlightNodes = treeObj.getNodesByParamFuzzy("name", searchCondition, null);
}
//<3>.高亮顯示並展現【指定節點s】
highlightAndExpand_ztree(treeId, highlightNodes, searchCondition, flag);
}
/**
* 高亮顯示並展現【指定節點s】
* @param treeId
* @param highlightNodes 須要高亮顯示的節點數組
* @param flag 須要高亮顯示的節點標識
*/
function highlightAndExpand_ztree(treeId, highlightNodes, tx, flag) {
var treeObj = $.fn.zTree.getZTreeObj(treeId);
//<1>. 先把所有節點更新爲普通樣式
var treeNodes = treeObj.transformToArray(treeObj.getNodes());
for(var i = 0; i < treeNodes.length; i++) {
treeNodes[i].highlight = false;
treeObj.updateNode(treeNodes[i]);
}
//<2>.收起樹, 只展開根節點下的一級節點
close_ztree(treeId);
//<3>.把指定節點的樣式更新爲高亮顯示，並展開
if(highlightNodes != null) {
for(var i = 0; i < highlightNodes.length; i++) {
if(flag != null && flag != "") {
if(highlightNodes[i].flag == flag) {
//高亮顯示節點，並展開
highlightNodes[i].highlight = true;
treeObj.updateNode(highlightNodes[i]);
//高亮顯示節點的父節點的父節點....直到根節點，並展現
var parentNode = highlightNodes[i].getParentNode();
var parentNodes = getParentNodes_ztree(treeId, parentNode);
treeObj.expandNode(parentNodes, true, false, true);
treeObj.expandNode(parentNode, true, false, true);
}
} else {
//高亮顯示節點，並展開
//highlightNodes[i].checked = true;
//var t = highlightNodes[i].name;
//t = t.replace(eval("/" + tx + "/gi"), "<span style='background-color: yellow;color:red'>" + tx + "</span>");
//highlightNodes[i].name = t;
//treeObj.updateNode(highlightNodes[i]);
highlightNodes[i].highlight = true;
treeObj.updateNode(highlightNodes[i]);
//高亮顯示節點的父節點的父節點....直到根節點，並展現
var parentNode = highlightNodes[i].getParentNode();
var parentNodes = getParentNodes_ztree(treeId, parentNode);
treeObj.expandNode(parentNodes, true, false, true);
treeObj.expandNode(parentNode, true, false, true);
}
}
}
}
/**
* 遞歸獲得指定節點的父節點的父節點....直到根節點
*/
function getParentNodes_ztree(treeId, node) {
if(node != null) {
var treeObj = $.fn.zTree.getZTreeObj(treeId);
var parentNode = node.getParentNode();
if(parentNode != null){
return getParentNodes_ztree(treeId, parentNode);
}else{
return node;
}
}
}
/**
* 設置樹節點字體樣式
*/
function setFontCss_ztree(treeId, treeNode) {
if(treeNode.id == 0) {
//根節點
return {
color: "#333",
"font-weight": "bold"
};
} else if(treeNode.isParent == false) {
//葉子節點
return(!!treeNode.highlight) ? {
color: "#ff0000",
"font-weight": "bold"
} : {
color: "#660099",
"font-weight": "normal"
};
} else {
//父節點
return(!!treeNode.highlight) ? {
color: "#ff0000",
"font-weight": "bold"
} : {
color: "#333",
"font-weight": "normal"
};
}
}
//統計已勾選節點
function onCheckMethod(treeId, treeNode) {
var treeObj=$.fn.zTree.getZTreeObj("tree");
nodes=treeObj.getCheckedNodes(true);
var v='';
for(var i=0;i<nodes.length;i++){
v = v+nodes[i].name+",";
console.log("節點id:"+nodes[i].id+"節點name:"+v);
}
}
function setCheck() {
var zTree = $.fn.zTree.getZTreeObj("tree"),
py = $("#py").attr("checked")? "p":"",
sy = $("#sy").attr("checked")? "s":"",
pn = $("#pn").attr("checked")? "p":"",
sn = $("#sn").attr("checked")? "s":"",
type = { "Y":py + sy, "N":pn + sn};
zTree.setting.check.chkboxType = type;
showCode('setting.check.chkboxType = { "Y" : "' + type.Y + '", "N" : "' + type.N + '" };');
}
var code;
function showCode(str) {
if (!code) code = $("#code");
code.empty();
code.append("<li>"+str+"</li>");
}
//高亮顯示
function setFontCss(treeId, treeNode)
{
return (!!treeNode.highlight) ? {color:"#FF0000", "font-weight":"bold","font-size":"14px"} : {color:"#000", "font-weight":"normal"};
};
</SCRIPT>
</head> <body> <div style="clear: both;"> <input type="text" id="ser" value="check"/> <input type="button" value="查找" onclick="search_ztree('tree', 'ser')"/> </div> <ul id="tree" class="ztree" style="width:260px; overflow:auto;"></ul> </body> </html>` css
以下是處理zTree初始化時默認選中某些節點
思路：確定是在初始化的時候，設置某些節點選中
var articleTagslist = "所有節點"; var _modifyArticleTags = $("#modifyArticleTags").val(); var setting = { check: { enable: true }, view: { nameIsHTML: true, fontCss: setFontCss }, data: { simpleData: { enable: true, idKey: "id", rootPId: "" } }, callback: { onCheck:onCheckMethod } }; t = $.fn.zTree.init($("#tree"), setting, articleTagslist); var menuIds = _modifyArticleTagsHide.split(','); for(var i = 0; i < menuIds.length; i++) { var node = t.getNodeByParam("id", menuIds[i]); if(node != null) { //選中 t.checkNode(node, true) } } articleTagNameGlobal = _modifyArticleTags;html
相關文章
- 1. zTree使用心的
- 2. 【zTree】 zTree使用的 小例子
- 3. jq-zTree使用
- 4. ztree使用
- 5. 【zTree】zTree開發使用說明【20140610】
- 6. 201. ztree 的簡單使用
- 7. Ztree的簡單使用
- 8. ztree插件的使用
- 9. zTree的簡單使用
- 10. ZTree的簡單使用
- 更多相關文章...
- • TortoiseSVN 使用教程 - SVN 教程
- • Docker 容器使用 - Docker教程
- • Composer 安裝與使用
- • 使用Rxjava計算圓周率
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. zTree使用心的
- 2. 【zTree】 zTree使用的 小例子
- 3. jq-zTree使用
- 4. ztree使用
- 5. 【zTree】zTree開發使用說明【20140610】
- 6. 201. ztree 的簡單使用
- 7. Ztree的簡單使用
- 8. ztree插件的使用
- 9. zTree的簡單使用
- 10. ZTree的簡單使用