HTML:
<div id="sysPendingTree" class="ztree"></div>
JS:
var setting = {
view: {
showIcon: false,
nameIsHTML: true
},
data: {
simpleData: {
enable: true
}
},
callback: {
// 节点点击事件
onClick: function(event, treeId, treeNode) {
// 当节点被点击时,将其添加到 clickedNodes 数组中
if (treeNode) {
// 只处理父节点,如果需要也可以处理叶子节点
var index = clickedNodes.indexOf(treeNode);
if (index === -1) {
clickedNodes = [];
// 如果节点不在数组中,则添加它
clickedNodes.push(treeNode);
}
}
}
}
};
var zNodes = []; // zTree 的节点数据
var clickedNodes = []; // 存储被点击的节点
var zTreeObj = null; // zTree 对象
var interval = null; // 定时器
// 获取 nodes 数据
function getNodes() {
$.ajax({
type: 'POST',
async: false, // 同步
url: __ctx + '/zs/aaa',
success: function(e){
// zNodes = [];
if(e.sum==0)
zNodes = null;
else {
// 组装个性化节点内容
zNodes.push({"name":"<span style='font-weight: bold;'>全部"
+"</span><span class='badge-orange red'>"+e.sum+"</span>"});
for(var i=0; i<e.list.length; i++) {
var row = e.list[i];
zNodes.push({"name":row.defName+" ("+row.total+")","pId":0,"defName":row.defName});
// zNodes.push({"name":row.defName+"<span class='badge-orange blue'>"+row.total+"</span>","pId":0,"defName":row.defName});
}
}
}
});
}
function initZTree() {
getNodes();
zTreeObj = $.fn.zTree.init($("#sysPendingTree"), setting, zNodes);
$('.button.ico_docu').hide(); // 去掉图标
}
function refreshAndExpandClickedNode() {
zNodes = [];
getNodes(); // 重新获取 nodes 数据
// 更新 zTree
// zTreeObj.updateNode(zNodes);
zTreeObj = $.fn.zTree.init($("#sysPendingTree"), setting, zNodes);
$('.button.ico_docu').hide();
// 展开之前被点击的节点
$.each(clickedNodes, function(index, node) {
// 根据节点的 key 或其他唯一标识符找到对应的节点,此处为 defName
var treeNode = zTreeObj.getNodeByParam("defName", node.defName);
if (treeNode) {
// 展开节点
zTreeObj.expandNode(treeNode, true, false, false);
// 模拟点击节点
var aObj = $("#" + treeNode.tId + "_a");
var event = new jQuery.Event("click");
aObj.trigger(event);
}
});
// 如果没点过,默认显示全部
if(clickedNodes.length==0) {
// 模拟点击节点
var aObj = $("#sysPendingTree_1_a");
var event = new jQuery.Event("click");
aObj.trigger(event);
}
}
$(document).ready(function(){
// 初始化树
initZTree();
// 每60秒刷新一次
interval = setInterval("refreshAndExpandClickedNode()", 1000 * 60);
});
效果:
json数据:
{
“sum”: 3576,
“list”: [
{
“total”: 3435,
“defName”: “Txxxxt”
},
{
“total”: 35,
“defName”: “Pxxxxw”
},
{
“total”: 25,
“defName”: “消息测试”
},
{
“total”: 23,
“defName”: “条件同步”
},
{
“total”: 8,
“defName”: “Sxxxxt”
},
{
“total”: 6,
“defName”: “Rxxxxulting”
},
{
“total”: 6,
“defName”: “Rxxxxtruction”
},
{
“total”: 6,
“defName”: “Sxxxxent”
},
{
“total”: 3,
“defName”: “跳转测试”
},
{
“total”: 4,
“defName”: “会签”
},
{
“total”: 3,
“defName”: “子流程同步”
},
{
“total”: 3,
“defName”: “testSMS”
},
{
“total”: 3,
“defName”: “testabc_f”
},
{
“total”: 2,
“defName”: “WO-CR”
},
{
“total”: 2,
“defName”: “版本测试”
},
{
“total”: 2,
“defName”: “aaa”
},
{
“total”: 2,
“defName”: “zstest”
}
]
}