ZTREE的使用

最新推荐文章于 2021-06-25 09:11:16 发布

Mrvingo

最新推荐文章于 2021-06-25 09:11:16 发布

阅读量754

点赞数

CC 4.0 BY-SA版权

分类专栏： Jquery插件文章标签： Jquery Ztree

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.youkuaiyun.com/maoobo/article/details/8735586

Jquery插件专栏收录该内容

4 篇文章

订阅专栏

<html>

<head>

<title>Ztree Demo</title>

<link rel="stylesheet" href="css/demo.css" type="text/css"/>
<link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" type="text/css"/>
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="js/jquery.ztree.excheck-3.5.js"></script>
<script type="text/javascript" src="js/jquery.ztree.exedit-3.5.js"></script>

</head>

//定义个规则

var setting = {
   edit: {
    enable: true,//false不能进行拖拽
    showRemoveBtn: false,
    showRenameBtn: false
   },
   data: {
    simpleData: {
     enable: true
    }
    ,keep:{
        parent:true,
     leaf: true
    }
   },
   callback: {
    beforeDrag: beforeDrag,
    beforeDrop: beforeDrop
   },
   check:{ //选择的配置
      enable:true,
      chkboxType:{"Y":"ps","N":"ps"},
      checkStyle:"checkbox"
   }
};

//定义个树

var zNodes=[{ id:1, pId:0, name:'父节点 1',code:'one'},{ id:2, pId:0, name:'父节点 2',code:'two'},{ id:3, pId:0, name:'父节点 3',code:'three'}];

$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);//初始化对象

});

</script>

<body>

<div class="zTreeDemoBackground left" style="border:1px solid #ccc; padding:20px; background:#EDF7FF">
<ul id="treeDemo" class="ztree"></ul>
</div>

</body>

</html>

ztree插件同时也有异步加载，数据对象的拖拽等一些很强大的功能，具体操作可见ztreeApi

Url:http://www.ztree.me/v3/api.php

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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