bootstrap风格的zTree插件

所属分类:导航-文件树

 166747  728  查看评论 (192)
分享到微信朋友圈
X
bootstrap风格的zTree插件 ie兼容6

使用方法

以demo为例:第一步、先加载依赖js和css文件:

<link rel="stylesheet" href="css/bootstrapStyle/bootstrapStyle.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.js"></script>
<script type="text/javascript" src="js/jquery.ztree.excheck.js"></script>
<script type="text/javascript" src="js/jquery.ztree.exedit.js"></script>

第二步、页面上加入树标签:

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

第三步、写js代码初始化树即可:

var setting = {
            view: {
                addHoverDom: false,
                removeHoverDom: false,
                selectedMulti: false
            },
            check: {
                enable: true
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            edit: {
                enable: true
            }
        };
        var zNodes =[
            {id:1, pId:0, name:"[core] 基本功能 演示", open:true},
{id:101, pId:1, name:"最简单的树 --  标准 JSON 数据"},
{id:102, pId:1, name:"最简单的树 --  简单 JSON 数据"},
{id:103, pId:1, name:"不显示 连接线"},
{id:104, pId:1, name:"不显示 节点 图标"},
{id:108, pId:1, name:"异步加载 节点数据"},
{id:109, pId:1, name:"用 zTree 方法 异步加载 节点数据"},
{id:110, pId:1, name:"用 zTree 方法 更新 节点数据"},
{id:111, pId:1, name:"单击 节点 控制"},
{id:112, pId:1, name:"展开 / 折叠 父节点 控制"},
{id:113, pId:1, name:"根据 参数 查找 节点"},
{id:114, pId:1, name:"其他 鼠标 事件监听"},
{id:2, pId:0, name:"[excheck] 复/单选框功能 演示", open:false},
{id:201, pId:2, name:"Checkbox 勾选操作"},
{id:206, pId:2, name:"Checkbox nocheck 演示"},
{id:211, pId:2, name:"Radio halfCheck 演示"},
{id:205, pId:2, name:"用 zTree 方法 勾选 Radio"},
{id:3, pId:0, name:"[exedit] 编辑功能 演示", open:false},
{id:301, pId:3, name:"拖拽 节点 基本控制"},
{id:302, pId:3, name:"拖拽 节点 高级控制"},
{id:304, pId:3, name:"基本 增 / 删 / 改 节点"},
{id:305, pId:3, name:"高级 增 / 删 / 改 节点"},
{id:307, pId:3, name:"异步加载 & 编辑功能 共存"},
{id:308, pId:3, name:"多棵树之间 的 数据交互"},
{id:4, pId:0, name:"大数据量 演示", open:false},
{id:401, pId:4, name:"一次性加载大数据量"},
{id:402, pId:4, name:"分批异步加载大数据量"},
{id:403, pId:4, name:"分批异步加载大数据量"},
        ];
        $(document).ready(function(){
            $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        });
相关插件-文件树

纯手写完成“移动端权限树”插件

实现移动端权限树的全选,半选,以及不选的递归功能
  文件树
 66178  431

js动态树插件DynamicTree

简单好用的 tree ,纯 js ,可编辑 Tree,并能导出为 html sql php
  文件树
 42932  328

jQuery目录树插件jtree

jQuery目录树、文件树插件jtree,带搜索功能
  文件树
 77153  443

基于bootstraptreeview无限分类树层级联动菜单

基于bootstraptreeview做的一个漂亮的无限分类树层级联动菜单
  文件树
 57409  386

讨论这个项目(192)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    呆子z 0
    2024/1/3 13:28:36
    -3/4随风 0
    2022/6/7 11:34:29
    怎么入后台数据操作 增加 删除 编辑? 回复
    610090904 0
    2020/7/3 17:03:45
    哪位大哥大姐能发小弟一份,没积分,很少整前端,现在要用bootstrap框架做个多级下拉并多选的,想到了这个,结果下载还要积分,有好心人帮忙发一份邮箱610090904@qq.com
        ?0
        2020/12/19 14:15:03
        有了吗? 能发我一份吗?
    回复
    高珂 0
    2020/3/24 11:30:02
    kp 0
    2020/1/1 14:27:48
    点击事件没有吗
    回复
    SuiY 0
    2019/10/30 14:20:46
    邹柯 0
    2019/10/18 19:27:36
    微风细雨 0
    2019/8/1 14:12:05
    谁给我发一份,,,没积分了
        Focus to Professional0
        2019/8/30 16:15:40
        叫哥,我发你邮箱
        dbt0
        2019/12/12 8:30:13
        求发858046022@qq.com
    回复
    一个疯子。 0
    2019/7/25 16:53:21
    下载了, 作者能加一下QQ 好友吗 有点问题要问 1337101783 回复
    21世纪20年代的时空 0
    2019/7/5 17:16:18
    可以拖拽,不错,很强 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复