js树形控件zTree使用总结

// 初始化zTree
var zTreeObj;
 
// 设置zTree的配置项
var setting = {
    data: {
        simpleData: {
            enable: true,
            idKey: "id",
            pIdKey: "pId",
            rootPId: 0
        }
    }
};
 
// 初始化树形数据
var zTreeNodes = [
    { id: 1, pId: 0, name: "节点1" },
    { id: 2, pId: 0, name: "节点2" },
    { id: 3, pId: 1, name: "节点1-1" },
    // ...更多节点
];
 
// 页面加载完成后初始化zTree
$(document).ready(function () {
    zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zTreeNodes);
});
 
// 监听节点被点击的事件
zTreeObj.setting.callback.onClick = function (event, treeId, treeNode) {
    console.log("点击了节点：", treeNode.name);
};
 
// 获取选中的节点
var selectedNode = zTreeObj.getSelectedNodes();
console.log("选中的节点：", selectedNode[0].name);
 
// 其他操作...

这段代码展示了如何初始化一个zTree控件，并设置基本的配置项以及树形数据。同时，它演示了如何在页面加载完成后初始化zTree，以及如何监听节点点击事件和获取选中的节点。这些操作是使用zTree控件时的基本步骤，对于开发者来说具有很好的教育意义。