zTree

使用
引入资源

将需要使用的 zTree v3.x 相关的 js、css、img 文件分别放置到相应目录。

Demo
<%--z树HTML代码--%>
<div id="ztree">
    <div>
        <ul id="treeDemo" class="ztree"></ul>
    </div>
</div>
<%--z树JS代码--%>
<script type="text/javascript" language="JavaScript">
    var zTreeObj;
    // zTree 的参数配置,深入使用请参考 API 文档(setting 配置详解)
    var setting = {};
    // zTree 的数据属性,深入使用请参考 API 文档(zTreeNode 节点数据详解)
    var zNodes = [
        {name:"test1", open:true, children:[
                {name:"test1_1"}, {name:"test1_2"}]},
        {name:"test2", open:false, children:[
                {name:"test2_1"}, {name:"test2_2"}]},
        {name:"mytest", isParent:true}
    ];
    $(document).ready(function(){
        zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
    });
</script>
后续调用
function showSelectNodes() {
    var tree = $.fn.zTree.getZTreeObj("treeDemo");// 获取zTree对象,对它的操作都基于这个对象。
    var nodes = tree.getCheckedNodes();// 获取被勾选的所以节点
    for (var i=0; i<nodes.length; i++){
        console.log(nodes[i]);// 这些节点是被复制进来的,并非原数据,但是拥有原数据的所有属性以及zTree新增的属性。
    }
}
配置 API文档(很详细好用)
核心

$.fn.zTree.init(obj, zSetting, zNodes):zTree初始化方法,参数分别为展现zTree的DOM容器,配置数据,节点数据。返回值为zTree对象,提供操作zTree的各种方法。

$.fn.zTree.getZTreeObj(treeId):获取zTree对象的方法,参数为DOM容器的id(不用#了)。

$.fn.zTree.destroy(treeId):销毁zTree的方法,参数为DOM容器的id。

zTreeObj.addNodes(parentNode, [index], newNodes, isSilent)zTreeObj.:添加节点

settings
// 自己写的异步加载配置,需要注意,这里的异步是一次性异步,所以需要将所有数据都一次加载出来,而不能像三级联动一样一级一级去加载
var setting = {
        view: {
            showLine: false
        },
        async: {
            enable: true,
            url: "${basePath}user/getAllData",
            type: "POST",
            autoParam: ["id"],
            //dataFilter: filter //对异步获取的数据进行处理
        },
        data: {
            key: {
              isParent: "hasChild" //设置isParent的辨认方式为 hasChild的值 。
            },
            simpleData: {
                enable: true,
                idKey: "id",
                pIdKey: "pid",
                rootPId: null
            }
        },
        callback: {
            // onAsyncSuccess: 
            // onAsyncError: 
            onCheck: function zTreeOnCheck(event, treeId, treeNode) {
            },
            onClick: function zTreeOnClick(event, treeId, treeNode) {
            }
        }
    };
TreeNodes
  • 标准JSON格式
// 使用嵌套关系表示父子关系
var nodes = [
	{name: "父节点1", children: [
		{name: "子节点1"},
		{name: "子节点2"}
	]}
];
  • 简单JSON格式
//根据id/pid表示父子关系,需要在setting.data.simpleData中开启,并且可以在其中修改对应关系。
var nodes = [
	{id:1, pId:0, name: "父节点1"},
	{id:11, pId:1, name: "子节点1"},
	{id:12, pId:1, name: "子节点2"}
];
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值