liut
334 lines
14 KiB
HTML
334 lines
14 KiB
HTML
{extend name="layout/user" /}
|
||
{block name="main"}
|
||
<div class="all-box">
|
||
<div class="top space-between">
|
||
<div class="top-left align-center">
|
||
<!--[if lte IE 9]><div style="color: #FFFFFF;width: 770px;text-align: center;background: #FF4949;margin: auto;">升级提示：当您看到此信息，说明您的浏览器不支持上传接口，请使用360（极速模式），QQ（新版），Chrome等新一代浏览器。</div><![endif]-->
|
||
|
||
<div class="top-item flex-box upload" onclick="upload()">
|
||
<em class="icon icon-upload"></em>
|
||
<p class="text">上传</p>
|
||
</div>
|
||
|
||
<div class="top-item flex-box" onclick="mkdir()">
|
||
<em class="icon icon-newfolder" title="新建"></em>
|
||
<p class="text">新建</p>
|
||
</div>
|
||
|
||
<div id="CilckCheck" style="display: none;" class="align-center">
|
||
<div id="CheckTmp" style="display: none;"></div>
|
||
<div class="top-item flex-box" onclick="CheckDelete()"
|
||
style="margin-right: 0px;padding: 0 8px 0 8px;border-radius: 0px;">
|
||
<em class="icon icon-delete" title="删除"></em>
|
||
<p class="text">删除</p>
|
||
</div>
|
||
<div class="top-item flex-box" onclick="moveFiles()"
|
||
style="padding: 0 8px 0 8px;border-radius: 0px;">
|
||
<p class="text" style="margin-left: 0px;">移动到</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="top-right space-between">
|
||
<div class="el-input">
|
||
<input id="sousuo" type="text" autocomplete="off" placeholder="搜索您的文件"
|
||
class="el-input__inner">
|
||
<span class="icon icon-search"
|
||
onclick="getTable('当前文件夹',$('#sousuo').val())"></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="daohang">
|
||
<span class="daohang-all" style="display: block;">
|
||
<span onclick="getTable()" style="cursor:pointer;">全部文件</span>
|
||
<span style="float:right;top: 1px;">
|
||
<span style="color: #f0ad4e;font-size: 12px;margin-right: 5px;"
|
||
title="鼠标右键文件去试试~">
|
||
<span class="icon icon-tips-caution"></span>
|
||
文件操作可使用右键
|
||
</span>
|
||
<span>已全部加载，共<span class="daohang-count">0</span>个</span>
|
||
</span>
|
||
</span>
|
||
<ul class="daohang-path" style="display: none;">
|
||
<li>
|
||
<a id="daohang-shangyiji" onclick="getTable()" href="javascript:;">返回上一级</a>
|
||
<span class="fuhao">|</span>
|
||
</li>
|
||
<li>
|
||
<a href="javascript:;" onclick="getTable()">全部文件</a>
|
||
<span class="fuhao">></span>
|
||
<span id="daohang">
|
||
</span>
|
||
</li>
|
||
<span style="float:right;">已全部加载，共<span class="daohang-count">0</span>个</span>
|
||
</ul>
|
||
</div>
|
||
|
||
|
||
<input style="display: none;" id="folder_id" value="0" />
|
||
|
||
|
||
<div id="emptyFile" style="display: none;">
|
||
<div class="emptyFile" style="visibility: visible;">
|
||
<div class="emptyFile2">
|
||
<div class="img">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="context-menu">
|
||
<ul class="list" data-id="" data-filename="" data-folder="" id="list1"
|
||
style="z-index: 100; left: 524px; top: 194px; display: none;">
|
||
<li>下载</li>
|
||
<li class="separate"></li>
|
||
<li>设置提取码</li>
|
||
<li>复制链接</li>
|
||
<li class="separate"></li>
|
||
<li>编辑文件</li>
|
||
<li>移动到</li>
|
||
<li class="separate"></li>
|
||
<li>重命名</li>
|
||
<li>删除</li>
|
||
</ul>
|
||
<ul class="list" id="list2"
|
||
style="z-index: 100; left: 524px; top: 194px; display: none;">
|
||
<li>重新加载页面</li>
|
||
<li class="separate"></li>
|
||
<li>新建文件夹</li>
|
||
<li class="separate"></li>
|
||
<li>刷新数据</li>
|
||
</ul>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
<div id="mkdir" style="display: none;">
|
||
<div style='width:350px;'>
|
||
<div style='width:320px;margin-left: 3%;margin-top: 3%;'
|
||
class='form-group has-feedback'>
|
||
<span style="color: red;">*</span>文件夹名称
|
||
<input style="margin-top: 3%;" id='dirName' class='form-control' type='text'
|
||
placeholder="请输入文件夹名称..." value="" />
|
||
</div>
|
||
<div style='width:320px;margin-left: 3%;' class='form-group has-feedback'>
|
||
<p>文件夹描述</p>
|
||
<textarea style="margin-top: 3%;" id='dirMiaoshu' class='form-control' rows="3"
|
||
placeholder="(可选) 请输入文件夹描述..."></textarea>
|
||
</div>
|
||
<div style='width:320px;margin-left: 3%;' class='form-group has-feedback'>
|
||
<button style='margin-top:5%;' type='button' class='btn btn-block btn-success'
|
||
onclick='mkdirTo()'>保存</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="setPass" style="display: none;">
|
||
<div class="modal-body" style="font-size: 14px;">
|
||
<form class="form-horizontal" role="form">
|
||
<fieldset>
|
||
<div class="form-group" style="margin-left: -3%;">
|
||
<label class="col-sm-7" style="font-size: 12px;"
|
||
style="margin-left: -2%;">Ps: 双击编辑框自动复制</label>
|
||
<textarea class="form-control" id="setPassUrl"
|
||
style="width: 300px;font-size: 13px;margin-top: 15px;margin-left: 2%;"
|
||
readonly="readonly"></textarea>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="col-sm-1 control-label"
|
||
style="margin-left: -1%;width: 88px;">提取码：</label>
|
||
<div class="col-sm-1" style="margin-left: -9%;">
|
||
<input class="form-control" id="setPassPass" type="text"
|
||
style="width: 80px;" maxlength="6" />
|
||
</div>
|
||
<label class="col-sm-1 control-label"
|
||
style="margin-left: 18%;width: 90px;">密码开关</label>
|
||
<div class="col-sm-3" style="margin-left: -18px;">
|
||
<label class="switch">
|
||
<input type="checkbox" id="setPassClick">
|
||
<div class="slider round"></div>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<div style='width:300px;margin-left: -1%;margin-top: 10%;'
|
||
class='form-group has-feedback'>
|
||
<button type='button' class='btn btn-block btn-success'
|
||
id="setPassBtn">保存</button>
|
||
</div>
|
||
</fieldset>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="table-box">
|
||
|
||
<table id="table"></table>
|
||
|
||
<script src="__STATIC__/js/file.js"></script>
|
||
<script>
|
||
|
||
//table自适应
|
||
$(window).resize(function () {
|
||
$("#table").bootstrapTable('resetView', {
|
||
height: $(window).height() - 171
|
||
});
|
||
});
|
||
|
||
//搜索回车
|
||
$("#sousuo").keydown(function (e) {
|
||
if (e.keyCode == 13) {
|
||
getTable('当前文件夹', $(this).val());
|
||
}
|
||
});
|
||
|
||
function getTable(folder_id, sousuo) {
|
||
var folder_id = folder_id || 0;
|
||
var sousuo = sousuo || "";
|
||
if (folder_id == "当前文件夹") {
|
||
folder_id = $('#folder_id').val();
|
||
}
|
||
|
||
$("#folder_id").val(folder_id); //更新当前文件夹ID
|
||
$('#table').bootstrapTable('destroy'); //销毁数据
|
||
|
||
var queryUrl = "{:url('file/list')}?rnd=" + Math.random() + "&folder_id=" + folder_id + "&search=" + sousuo;
|
||
$("#table").bootstrapTable({
|
||
url: queryUrl, //请求后台的URL（*）
|
||
method: 'GET', //请求方式（*）
|
||
pageNumber: 1, //初始化加载第一页1
|
||
pagination: true, //是否显示分页条1
|
||
pageSize: 20, //单页显示条数1
|
||
|
||
striped: true, //是否显示行间隔色
|
||
sortable: true, //是否启用排序
|
||
sortOrder: "asc", //排序方式
|
||
dataField: "data", //Json数据的字段
|
||
// clickToSelect: true, //点击选中
|
||
height: $(window).height() - 171, //高度
|
||
sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
|
||
classes: "table table-hover",
|
||
|
||
queryParams : function (params) {
|
||
return {
|
||
rows: params.limit, //页面大小
|
||
page: (params.offset / params.limit) + 1, //页码
|
||
};
|
||
},
|
||
|
||
//无内容时
|
||
formatNoMatches: function () {
|
||
if (sousuo) {
|
||
$(".emptyFile2").addClass("emptySousuo");
|
||
var msg = '<p title="为什么不去问问神奇的海螺呢">在您的网盘中，未搜索到相应的文件</p>';
|
||
} else {
|
||
var msg = '<p>您还没上传过文件哦，点击<span style="cursor: pointer;color:#09AAFF;" onclick="upload()">上传</span>按钮～</p>';
|
||
}
|
||
|
||
$(".emptyFile2 div").html(msg);
|
||
$("#table").html($("#emptyFile").html());
|
||
return "";
|
||
},
|
||
|
||
//加载动画
|
||
loadingTemplate: function () {
|
||
return "<span class=\"loading-wrap\">\n <img src=\"__STATIC__/image/loading.gif\"/>\n</span>";
|
||
},
|
||
|
||
//加载失败
|
||
onLoadError: function () {
|
||
// layer.msg("数据加载失败！",{
|
||
// icon:2
|
||
// })
|
||
},
|
||
|
||
//加载完成
|
||
onLoadSuccess: function (data) {
|
||
$(".fixed-table-loading").remove();
|
||
daohang(data.parent, data.total, sousuo); //修改导航
|
||
rename(); //初始化行内编辑框
|
||
clickList(); //初始化右键菜单
|
||
clickFolder(); //初始化文件夹点击事件
|
||
HoverGengduo(); //鼠标悬浮显示更多按钮
|
||
|
||
},
|
||
|
||
//自定义css
|
||
rowStyle: function (row, index) {
|
||
var style = {};
|
||
style = {
|
||
css: {
|
||
'font-size': '13px'
|
||
}
|
||
};
|
||
return style;
|
||
},
|
||
|
||
//复选框点击事件
|
||
onCheckAll: function (rows) {
|
||
CilckCheck(); //复选框选中 更新菜单栏
|
||
},
|
||
onCheck: function (row) {
|
||
CilckCheck(); //复选框选中 更新菜单栏
|
||
},
|
||
onUncheck: function (row) {
|
||
CilckCheck(); //复选框选中 更新菜单栏
|
||
},
|
||
onUncheckAll: function (row) {
|
||
CilckCheck(); //复选框选中 更新菜单栏
|
||
},
|
||
|
||
//表头
|
||
columns: [{
|
||
checkbox: true,
|
||
visible: true //是否显示复选框
|
||
},
|
||
{
|
||
field: 'file_name',
|
||
title: '文件名',
|
||
sortable: true, //排序
|
||
width: '500px',
|
||
formatter: function (value, row, index) { //处理数据
|
||
return value;
|
||
},
|
||
}, {
|
||
field: 'file_size',
|
||
title: '文件大小',
|
||
sortable: true, //排序
|
||
}, {
|
||
field: 'count_open',
|
||
title: '浏览',
|
||
sortable: true, //排序
|
||
}, {
|
||
field: 'count_down',
|
||
title: '下载',
|
||
sortable: true, //排序
|
||
}, {
|
||
field: 'url',
|
||
title: '分享链接',
|
||
}, {
|
||
field: 'url_pass',
|
||
title: '提取码',
|
||
}, {
|
||
field: 'update_time',
|
||
title: '修改日期',
|
||
sortable: true, //排序
|
||
},
|
||
],
|
||
|
||
//填入个数据，要不然会显示没文件
|
||
data: [{
|
||
"file_name": "",
|
||
}],
|
||
})
|
||
}
|
||
getTable();
|
||
</script>
|
||
|
||
</div>
|
||
</div>
|
||
{/block} |