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

jQuery文件树型结构插件proTree

所属分类：导航-文件树

 44476  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);
    }
})
相关插件-文件树
查看更多

jquery mobile 树插件

 jquery mobile 树形插件
  文件树
 60329  359

基于bootstraptreeview无限分类树层级联动菜单

 基于bootstraptreeview做的一个漂亮的无限分类树层级联动菜单
  文件树
 56206  386

jQuery目录树插件

 jQuery文件树插件
  文件树
 81184  466

js动态树插件DynamicTree

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

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

    手机端可以用吗

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