layui扩展模块 - fileManager 文件管理器-文档

推荐开启分页，如果文件（列表）过多不使用分页页面会延迟更新很久

介绍

此扩展模块支持服务器或电脑的真实路径也支持数据库中的虚拟路径，根据自己的需求使用即可。

下载

去码云下载最新版的 enianAdmin项目，然后到前端目录提取即可使用。因为本身是基于enianAdmin项目开发，为了方便维护，没有单独提供下载地址。新版将进行众多优化，并增加好的案例，再提供下载，感谢支持。

模块完整结构

/public/static/layui_extends
├─ fileManager    -- 模块静态文件目录
│  │  fileManager.css -- 模块css文件
│  └─img            -- 模块图标（图片）目录
│  fileManager.js  -- 模块文件
...

样式展示

引用示例

前端代码（html）

<div  id='sjl' class="fileManagerParent"></div>
<!-- 还可以直接填写高度，不写则默认 100% -->
<div  id='sjl' class="fileManagerParent" style="height: 570px;"></div>

JS代码

    fileManager.render({
        elem:'#sjl',
        staticPath:'__STATIC__/layui_extends/fileManager',
        uploadConfig:{
            //简单示例，data(额外参数)没有需求请不要填写，因为默认会传递当前文件管理路径
            url:'/index/index/upload',//上传地址
            done:function(result){
                //上传结果
                console.log(result);    
            }
        },
        pageConfig:true,
        pageJump:function(obj,callback){
            console.log('分页数据：',obj);
            $.ajax({
                type:"get",
                url:"/index/index/indexdata.html",
                data:{
                    'dirId':obj.id,
                    'limit':obj.limit,
                    'page':obj.page
                },
                success:function(d){
                    console.log(d);
                    if(d.code == 1){
                        callback(d.fileList,d.count);
                    }else{
                        layer.alert('加载出现了问题');
                    }
                },
                async:true
            });
        },
        getPathList:function(obj,callback){
            //console.log(newPath,id)
            id=(obj.id==0)?'ROOT':obj.id
            $.ajax({
                type:"get",
                url:"/index/index/indexdata.html",
                data:{
                    'dirId':obj.id,
                    'limit':obj.limit,
                    'page':1
                },
                success:function(d){
                    console.log(d);
                    if(d.code == 1){
                        callback(d.fileList,d.count);
                    }else{
                        layer.alert('加载出现了问题');
                    }
                },
                async:true
            });
        },
        newDirDone:function(dirObj,name){
            console.log('新建文件夹',dirObj,name);
            $.ajax({
                type:"get",
                url:"/index/index/newDir.html?newDirName="+name+"&dirId="+dirObj.id,
                success:function(d){
                    console.log(d);
                    if(d.code == 1){
                        layer.alert('新建成功')
                    }else{
                        layer.alert('新建失败');
                    }
                },
                async:true
            });
        }
    })

基本参数

参数	类型	必须	说明
elem	str	是	示例：#test
staticPath	str	是	储存扩展模块所需的css和图片路径
filePath	str	是（仅限实际目录）	根目录路径，此参数仅对管理实际路径有效，虚拟目录（数据库）无效，示例：window(D:),linux(/)
imgSrc	bool		为true，图片类型文件会直接按src字段值显示
uploadConfig	obj		上传插件配置，详见官网点此查看 注意：1.无需设置elem 2.可以通过 fileManager.uploadObj 获得上传模块的对象 3.data(额外参数)没有需求请不要填写，因为默认会传递当前文件管理路径
pageConfig	bool/obj		true 使用默认分页配置，也可以是一个obj对象，如果是对象请参考官网点此查看 注意：原elem不能设置。jump事件已经整合被 pageJump 代替
pageJump	func		分页事件 详细说明
getPathList	func		接收目录数据，一般在此写ajax获得数据 详细说明
newDirDone	func		新建文件夹事件 详细说明

特殊参数完整说明

pageJump

//...此处省略其他参数代码
pageJump:function(obj,callback){
    console.log('分页数据：',obj);
    //obj参数说明
    //id        目录id（数据库版虚拟路径版有内容）
    //path        目录路径（真实路径版有内容）
    //limit        每页显示个数
    //page        页数
    //laypage    原始laypage参数
    //获得数据后 需要回调
    callback(fileList,count);
    //回调参数说明
    //fileList        文件数据列表数组【若开启分页需分页后数据】
    //count            所有数据总数
},

getPathList

getPathList:function(obj,callback){
    //此处obj与pageJump的 obj参数相同
    callback(fileList,count);
    //回调参数说明
    //fileList        文件数据列表数组【若开启分页需分页后数据】
    //count            所有数据总数
},

newDirDone

newDirDone:function(dirObj,name){
    //name     新文件夹名
    //obj        路径对象及分页信息
}

数据格式

名称	解释
id/path	[必]路径或路径id，二选一。当选用数据库作为目录。建议使用id
type	[必]/DIR 表示目录。其他png，jpg，txt等文件格式
pid	[必]所在文件夹id。父id，或者为父路径，如果为0则代表根目录
src	网站可以直接获取的路径
time	可选时间，暂无用处

[
{id: 1, name: "doc", type: "/DIR", src: null, path: null, pid: 0, time: 1546255337}
,{id: 13, name: "打赏图片", type: "/DIR", src: null, path: null, pid: 0, time: 1546255337}
,{id: 55, name: "用户头像", type: "/DIR", src: null, path: null, pid: 0, time: 1546528596}
]

监听文件或文件夹点击事件

fileManager.listenClick(function(data){
        console.log(data) 
        //输出结果
        //{id: 7,name: "doc2",path: null,src: null,type: "/DIR"}
})

监听文件或文件夹右键点击事件

fileManager.listenClickRight(function(data){
    console.log(data)
    return false;//阻止浏览器默认右键
})

获得文件管理器当前所在文件夹目录或id

fileManager.getNowPath();
//返回数据示例
{
    id:0,
    path:"D:"
}

获得选中状态下选中内容

fileManager.getMoreCheck()
//得到所有选中数组内容

重载当前路径

一般使用在，新建文件夹成功后，上传文件成功后，当然可以使用到任何地方

fileManager.reload()

动态开启/关闭多选 0.1.2019-1-2新增

//开启
fileManager.openMoreCheck();
//关闭
fileManager.closeMoreCheck();

更换默认图标

本模块所选图标来源https://www.iconfont.cn/ ，你可以根据自己需求增加扩展

解压文件夹在fileManager/img 目录下为图标文件，

文件命名格式为：文件后缀名.png

例如：

png格式文件： png.png
js格式文件： js.png

无图标情况下，自动选择none.png图标，这样可以根据自己需求删减或增加需要图标

打赏