bootstrap风格的zTree插件

所属分类:导航-文件树

 21888  174  查看评论 (105)
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);
        });
相关插件-文件树

jQuery树形下拉菜单

jQuery树形下拉菜单 支持Ajax异步加载jquery ajax tree menu
  文件树
 41200  125

jQuery树型插件dtree(带搜索)

dtree选择部门或者选择部门下人员复选框单选框插件
  文件树
 15176  64

树控件

非常简单的树控件,代码中注释说明很详细,方便大家修改。
  文件树
 21614  37

jquery mobile 树插件

jquery mobile 树形插件
  文件树
 22038  46

讨论这个项目(105)回答他人问题或分享插件使用方法奖励jQ币

    ?? 0
    2018/1/18 9:16:00

    真的好像要这个插件

    回复
    慕白~ 0
    2018/1/16 20:11:42

    没有币啊

        ??0
        2018/1/18 9:16:59
        我按这个有的代码复制了都不行,心痛
        落叶枫林0
        2018/1/18 13:01:15
        爬虫
    回复
    小? 0
    2018/1/4 10:10:37
    有没有大佬可以给个demo的啊? 回复
    青春微凉 0
    2018/1/3 16:43:26
    武宜王 0
    2018/1/2 13:28:37
    一诺諾壹 0
    2017/12/27 10:44:55
    九叶子 0
    2017/12/26 16:48:59
    lyricing 0
    2017/12/22 10:07:24

    谁有api文档呀

        ╊???? ? ?0
        2017/12/25 9:41:28
        百度搜Ztree,这个插件就是美化了一下
    回复
    savi1115 0
    2017/12/21 14:59:25
    好想要这个插件
        簧卜乇0
        2018/1/1 15:41:58
        挺全面的
    回复
    lxw 0
    2017/12/21 11:12:17
取消回复