无限树Jquery插件zTree的常用功能特性总结

zTree是一个基于jquery的树插件，提供了丰富的功能，适合各种web应用场景。以下是zTree的常用功能特性总结。

1. zTree的基本用法

<div id="treeDemo" class="ztree"></div>

var zNodes = [
    {id:1, pId:0, name:"父节点1"},
    {id:2, pId:1, name:"子节点1"},
    {id:3, pId:1, name:"子节点2"},
];
var setting = {};
$(document).ready(function(){
    $.fn.zTree.init($("#treeDemo"), setting, zNodes);
});

使用以上代码即可生成一个简单的树形结构。将节点数组赋值给zNodes变量，然后调用$.fn.zTree.init()方法即可。

2. zTree的设置项

var setting = {
    view: {
        showLine: false,
        showIcon: false
    },
    check: {
        enable: true
    },
    data: {
        simpleData: {
            enable: true
        }
    },
    callback: {
        onClick: function(event, treeId, treeNode){
            console.log(treeNode);
        }
    }
};

以上是一个设置项对象，包含了zTree的查看器、选择器、数据和回调功能。可以根据需要进行修改，其中callback回调函数在节点被点击时调用。

3. zTree的节点操作

var zTreeObj = $.fn.zTree.getZTreeObj("treeDemo");

var nodes = zTreeObj.getNodes(); // 获取所有根节点
var node = zTreeObj.getNodeByParam("id", 1, null); // 根据id查找节点
var node = zTreeObj.getNodeByTId("treeDemo_1"); // 根据DOM元素的id属性查找节点
var parentNode = zTreeObj.getNodeByTId("treeDemo_1").getParentNode(); // 获取指定节点的父节点
var node = zTreeObj.addNodes(null, {id:4, pId:0, name:"父节点2"}); // 添加新节点
zTreeObj.removeNode(node); // 删除节点

以上是一些zTree的常用节点操作，可以根据需要进行调用。

4. zTree的示例

示例1：zTree的异步加载

var setting = {
    async: {
        enable: true,
        url: "getNodes.php",
        autoParam: ["id", "name=n", "level=lv"],
        otherParam: {"otherParam": "zTreeAsyncTest"},
        dataFilter: filter
    }
};
function filter(treeId, parentNode, response){
    return response;
}

<div id="treeDemo" class="ztree"></div>

在以上代码中，将异步数据的获取过程封装为一个url地址，通过zTree的async设置项即可实现异步加载。其中dataFilter回调函数用于对异步获取的数据进行处理。

示例2：zTree的选择器

var setting = {
    check: {
        enable: true,
        chkStyle: "checkbox",
        chkboxType: {"Y":"", "N":""}
    }
};

<div id="treeDemo" class="ztree"></div>

在以上代码中，通过zTree的check设置项即可实现节点的选择器功能。其中chkStyle用于选择框的样式，chkboxType用于设置父节点与其子节点的联动方式。

总结

以上是zTree的常用功能特性，可以根据具体需求进行灵活的配置和调用。zTree在实际应用中非常常见，掌握其常用功能特性能够提高web开发的效率。