UI | 输入 | 媒体 | 导航 | 其他 | 网页模板| APP模板| 常用代码| 在线代码

jQuery文件树型结构插件proTree

所属分类：导航-文件树

 44622  335  查看评论 (21)
分享到微信朋友圈
X
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);
    }
})
相关插件-文件树
查看更多

js动态树插件DynamicTree

 简单好用的 tree ，纯 js ，可编辑 Tree，并能导出为 html sql php
  文件树
 42436  328

jQuery目录树插件

 jQuery文件树插件
  文件树
 81469  466

jQuery表格树插件TreeGrid

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

jQuery结构图插件orgchart

 jQuery横向组织结构图插件orgchart
  文件树
 36649  248

讨论这个项目（21）回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    纯~ 0
    2019/11/1 16:13:42
    id: 1,name: "",pid: 1
    除了这几个属性还可以添加其他的吗，或者自定义 回复
    5394 0
    2019/3/12 11:23:56
    嗯嗯嗯嗯好 不错 回复
    ～Baby～ 0
    2019/3/1 14:57:16
    我有更简洁的写法，不操作dom 回复
    咯哦图我 0
    2019/2/16 12:56:19
    这个插件很好，请问我能基于这个开发一下吗？ 回复
    没有梦想，何必远方 0
    2018/9/3 10:45:16
    怎么获取父节点 回复
    初级橙子 0
    2018/8/21 10:40:52
    请问不控制不许选中父节点呀？ 回复
    ?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

    手机端可以用吗

    回复
查看更多评论
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
取消回复