jQuery文件树型结构插件proTree

所属分类:导航-文件树

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

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

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

jQuery文件树插件SimpleTree.js

jQuery文件树插件SimpleTree.js,代码少使用方便。
  文件树
 19020  50

树控件

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

js动态树插件DynamicTree

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

讨论这个项目(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

        是的

    回复
取消回复