实现了多选框，可搜索，父节点后显示子节点个数，树形图，插件用的是zTree.js，demo里写了测试数据，可以替换自己的数据，样式需要自己修改，先附上效果图，效果图是我把样式改过的
1565250236(1).png
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.ztree.all.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 type="text/javascript">
var zTree;
var demoIframe;
var setting = {
check: {
enable: true
},
view: {
dblClickExpand: false, //表示双击节点 切换 / 不切换 展开状态
showLine: true,
// selectedMulti: false,// 支持 / 不支持 同时选中多个节点
nameIsHTML: true, //支持 / 不支持 HTML 脚本
showIcon: false //没有小图标
},
data: {
simpleData: {
enable: true,
idKey: "id",
pIdKey: "pId",
rootPId: ""
}
}
};
var zNodes = [{id: 1,pId: 0,name: "[core] 基本功能 演示",open: true},
{id: 101,pId: 1,name: "最简单的树 -- 标准 JSON 数据"},
{id: 102,pId: 1,name: "最简单的树 -- 简单 JSON 数据"},
{id: 103,pId: 1,name: "不显示 连接线"},
{id: 104,pId: 1,name: "不显示 节点 图标"},
{id: 111,pId: 1,name: "单击 节点 控制"},
{id: 112,pId: 1,name: "展开 / 折叠 父节点 控制"},
{id: 113,pId: 1,name: "根据 参数 查找 节点"},
{id: 114,pId: 1,name: "其他 鼠标 事件监听"},
{id: 2,pId: 0,name: "[excheck] 复/单选框功能 演示",open: false},
{id: 201,pId: 2,name: "Checkbox 勾选操作"},
{id: 206,pId: 2,name: "Checkbox nocheck 演示"},
{id: 203,pId: 202,name: "用 zTree 方法 勾选 Checkbox"},
{id: 204,pId: 203,name: "Radio 勾选操作"},
{id: 209,pId: 204,name: "Radio nocheck 演示"},
{id: 210,pId: 2,name: "Radio chkDisabled 演示"},
{id: 211,pId: 2,name: "Radio halfCheck 演示"},
{id: 205,pId: 2,name: "用 zTree 方法 勾选 Radio" },
{id: 3,pId: 0,name: "[exedit] 编辑功能 演示",open: false},
{id: 301,pId: 3,name: "拖拽 节点 基本控制"},
{id: 302,pId: 3,name: "拖拽 节点 高级控制"},
{id: 303,pId: 3,name: "用 zTree 方法 移动 / 复制 节点"},
{id: 304,pId: 3,name: "基本 增 / 删 / 改 节点"},
{id: 305,pId: 3,name: "高级 增 / 删 / 改 节点"}
];
$(document).ready(function() {
var t = $("#tree");
t = $.fn.zTree.init(t, setting, zNodes);
var zTree = $.fn.zTree.getZTreeObj("tree");
//选中的节点
var nodes = t.getCheckedNodes(true);
console.log(nodes);
//节点名称上显示子节点的数量
showCount(t);
});
/**
* 节点名称上显示子节点的数量
* @param {Object} ztreeObj
*/
function showCount(ztreeObj) {
var pList = ztreeObj.getNodesByParam('isParent', true);
var p, count = 0;
for(var i = pList.length - 1; i >= 0; i--) {
p = pList[i];
if(!p.children) {
count = 0;
} else {
count = ztreeObj.transformToArray(p.children).length;
}
if(!p.srcName) {
p.srcName = p.name;
}
p.name = p.srcName + '(' + count + ')';
ztreeObj.updateNode(p);
}
}
/**
* 展开树
* @param treeId
*/
function expand_ztree(treeId) {
var treeObj = $.fn.zTree.getZTreeObj(treeId);
treeObj.expandAll(true);
}
/**
* 收起树：只展开根节点下的一级节点
* @param 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 treeId
* @param searchConditionId 文本框的id
*/
function search_ztree(treeId, searchConditionId) {
searchByFlag_ztree(treeId, searchConditionId, "");
}
/**
* 搜索树，高亮显示并展示【模糊匹配搜索条件的节点s】
* @param treeId
* @param searchConditionId 搜索条件Id
* @param flag 需要高亮显示的节点标识
*/
function searchByFlag_ztree(treeId, searchConditionId, flag) {
//<1>.搜索条件
var searchCondition = $('#' + searchConditionId).val();
//<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.length != 0) {
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 {
//高亮显示节点，并展开
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]);
//高亮显示节点的父节点的父节点....直到根节点，并展示
var parentNode = highlightNodes[i].getParentNode();
var parentNodes = getParentNodes_ztree(treeId, parentNode);
treeObj.expandNode(parentNodes, true, false, true);
treeObj.expandNode(parentNode, true, false, true);
}
}
} else {
$("#" + treeId).html("");
var t = $("#" + treeId);
t = $.fn.zTree.init(t, setting, zNodes);
var zTree = $.fn.zTree.getZTreeObj(treeId);
showCount(t);
}
}
/**
* 递归得到指定节点的父节点的父节点....直到根节点
*/
function getParentNodes_ztree(treeId, node) {
if(node != null) {
var treeObj = $.fn.zTree.getZTreeObj(treeId);
var parentNode = node.getParentNode();
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"
};
}
}
</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>
网友评论