评论:jQuery文件树型结构插件proTree  [查看原文]

所属分类:导航-文件树

 12618  26  15
当前第1页 / 共1页
    ?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; 这个也要加哈
    回复
    ??Fml0
    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
        已修改,正在审核,可自己修改,代码已发至评论
    回复
    CRayFish070
    2017/12/13 16:37:06

    手机端可以用吗

    回复
    CRayFish070
    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

        是的

    回复

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

取消回复