jQuery文件树型结构插件proTree

所属分类:导航-文件树

 15021  34  查看评论 (15)
jQuery文件树型结构插件proTree ie兼容9

更新时间:2018/3/19 下午4:52:11

更新说明:基于用户要求,要求列表展开、闭合控制,先发布更改过后的代码。

$(".innerUl").ProTree({
    arr: arr,
    close: true,
    simIcon: "fa fa-file-o", //单个标题字体图标 不传默认glyphicon-file
    mouIconOpen: "fa fa-folder-open-o", //含多个标题的打开字体图标  不传默认glyphicon-folder-open
    mouIconClose: "fa fa-folder-o", //含多个标题的关闭的字体图标  不传默认glyphicon-folder-close
    callback: function(id, name) {
        alert("你选择的id是" + id + ",名字是" + name);
    }
});

增加 close 参数 默认为false, 如果闭合,传入true 即可


标题的图标是font-awesome图标  更改 请参考font-awesome的字体图标替换自己想要的图标

$(".innerUl").ProTree({
    arr: arr,
    simIcon: "fa fa-file-o", //单个标题字体图标 不传默fa fa-file-o
    mouIconOpen: "fa fa-folder-open-o", //含多个标题的打开字体图标  不传默认fa fa-folder-open-o
    mouIconClose: "fa fa-folder-o", //含多个标题的关闭的字体图标  不传默认fa fa-folder-oe
    callback: function(id, name) {
        alert("你选择的id是" + id + ",名字是" + name);
    }
})
相关插件-文件树

jQuery表格树插件TreeGrid

网上找的源码经过自己修改亲测可以兼容ie5及以上版本应该可以兼容jquery1.3以上的所有版本.由于是开源的如果兼容性有问题可以直接修改里面的代码.
  文件树
 60267  96

bootstrap风格的zTree插件

使用bootstrap的同学,在使用zTree插件时,发现风格很难看,和bootstrap不搭调,现在你们的福利来了,bootstrap风格的zTree插件发布了!
  文件树
 46450  257

轻量级的原生js权限树插件(原创)

YnTree是一款专门用于权限管理的权限树插件,它依靠数据来驱动,不依赖于任何别的插件并且支持ajax。
  文件树
 5838  19

js动态树插件DynamicTree

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

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

    ?Toretto? 0
    2018/4/19 15:58:52
    天道酬勤 0
    2018/3/19 16:57:55

    基于用户要求,需展开、闭合列表可控,已上传代码,正在审核中;

    var Tree = function(element, options) {
            this.element = element;
            //json数组
            this.JSONArr = options.arr;
            //单个文件图标
            this.simIcon = options.simIcon || "";
            //闭合
            this.close = options.close || false;
            //多个文件打开图标
            this.mouIconOpen = options.mouIconOpen || "fa fa-folder-open-o";
            //多个文件关闭图标
            this.mouIconClose = options.mouIconClose || "fa fa-folder-o";
            //回调函数
            this.callback = options.callback || function() {};
            //初始化
            this.init();
            增加 close
    
            Tree.prototype.init = function() {
                var self = this;
                //事件
                this.JSONTreeArr = this.proJSON(this.JSONArr, 0);
                this.treeHTML = this.proHTML(this.JSONTreeArr);
                this.element.append(this.treeHTML);
                if (this.close) {
                    //闭合
                    this.element.children(".menuUl").find("li").children(".menuUl").hide();
                    var i_arr = this.element.children(".menuUl").find("li").find('i');
                    i_arr.each(function(index, item) {
                        if ($(item).attr('ischek')) {
                            $(item).attr("ischek", 'false');
                            $(item).removeClass(self.mouIconOpen).addClass(self.mouIconClose)
                        }
                    })
                }
                //闭合
                this.bindEvent();
            }

    js中加入 闭合之间的代码即可

        天道酬勤0
        2018/3/19 17:02:55
        var self = this; 这个也要加哈
    回复
    ??Fml 0
    2017/12/22 10:02:26

    请问怎样让他在初始化时全部闭合?

        Forward0
        2018/1/23 11:20:13

        你好   初始化闭合搞定了吗?

        耶嘿0
        2018/3/15 13:34:41
        初始化闭合该怎么弄
        天道酬勤0
        2018/3/19 16:58:46
        已修改,正在审核,可自己修改,代码已发至评论
    回复
    CRayFish07 0
    2017/12/13 16:37:06

    手机端可以用吗

    回复
    CRayFish07 0
    2017/12/3 0:12:03
    0
    2017/11/10 16:07:29

    为什么我动态ajax加载数据出来,没用

    var arr = [{
    /*
        id: 1,
        name: "耗材类别",
        pid: 0
    }, {
        id: 2,
        name: "A.消毒",
        pid: 1
    }, {
        id: 3,
        name: "B.针线",
        pid: 1
    }, {
        id: 4,
        name: "C.配置",
        pid: 1
    }, {
        id: 5,
        name: "D.辅助",
        pid: 1
    */
    }];
    tree();
    
    function tree() {
        $.ajax({
            url: "/consumptive/class/query",
            type: "POST",
            timeout: "4000",
            dataType: "json",
            "success": function(json) {
                var str = "";
                $.each(json.data, function(i, obj) {
                    str = "{id:" + obj.class_Id + ",name:'" + obj.class_Code + "." + obj.class_Name + "',pid:0}";
                    arr.push(str);
                });
    
                alert(arr);
            },
            "error": function() {
                msg("服务器异常");
            }
        });
    }
    //标题的图标是集成bootstrap 的图标  更改 请参考bootstrap的字体图标替换自己想要的图标
    $(".innerUl").ProTree({
        arr: arr,
        simIcon: "fa fa-file-o", //单个标题字体图标 不传默认glyphicon-file
        mouIconOpen: "fa fa-folder-open-o", //含多个标题的打开字体图标  不传默认glyphicon-folder-open
        mouIconClose: "fa fa-folder-o", //含多个标题的关闭的字体图标  不传默认glyphicon-folder-close
    
    
    })
        天道酬勤0
        2017/11/16 9:26:41
        你push的是对象字符串,要对象啊
        辜?戈0
        2018/1/7 17:24:04

        pid是什么意思?

        ?眼檩眼0
        2018/1/12 17:08:23

        写在success返回里面

    回复
    泡??斌メ 0
    2017/9/12 18:51:01

    还是ztree好用

        ? ??? Timo ?0
        2017/9/14 17:45:33

        是的

    回复
取消回复
  短信接口