bootstrap风格的zTree插件

所属分类:导航-文件树

 33027  211  查看评论 (120)
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);
        });
相关插件-文件树

树控件

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

jQuery树型插件dtree(带搜索)

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

jquery mobile 树插件

jquery mobile 树形插件
  文件树
 24467  53

带有复选框可折叠的树形结构

该插件是我改良的layer的树形插件,在原始的layer插件中的树形结构是没有复选框的,经我修改后可用以拿来做权限系统的权限选择
  文件树
 40483  167

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

    单人街道 0
    2018/4/18 13:25:31
    有没有大佬知道,这个插件怎么将复选框改成单选框,找了半天,硬是没找到
        iProg-js1
        2018/4/19 9:57:17
        check: {
            enable: true,
            autoCheckTrigger: true,
            chkStyle: "radio",
            radioType: "level"
        },
    回复
    0
    2018/4/9 14:14:35
    卡卡罗特007幸福 0
    2018/3/20 14:08:30
    这个怎么和后台关联起来呢?我js不是很好
        卡卡罗特007幸福0
        2018/3/20 14:12:48
        就是增删改查和后台联系起来
    回复
    酸菜鱼豆腐 0
    2018/3/7 9:45:38
    止于终老丶 0
    2018/2/27 9:03:21
    有点看不懂啊。这只是最简单的demo,其他都没有
        iProg-js0
        2018/4/20 11:33:47
        可以移步zTree官网查看开发文档和api
        http://www.treejs.cn/v3/main.php#_zTreeInfo
    回复
    ?? 0
    2018/2/2 15:40:27

    怎样在 add edit remove 里面添加一个点击事件啊,一直找事件没找到

    回复
    猫猫 0
    2018/1/30 10:51:03

    牛牛,正好是想要的

        徐国清cherry0
        2018/3/7 14:52:33
        同感身受啊
    回复
    YANG 0
    2018/1/24 17:43:54

    样式好看多了,谢谢作者

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

    真的好像要这个插件

        ★sacrifice.0
        2018/1/22 14:43:37

        在官网上下载ztree  但是不会用  实现不了这个效果

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

    没有币啊

        ??0
        2018/1/18 9:16:59
        我按这个有的代码复制了都不行,心痛
        落叶枫林0
        2018/1/18 13:01:15
        爬虫
    回复
取消回复