Skip to content

O
OneBlog

智布道 / OneBlog
9 个月 前同步成功

通知 11
Star 2
Fork 0
O
OneBlog

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 1103255f 编写于 作者: 智布道's avatar 智布道 👁
浏览文件
操作

🐛 解决Gitee Issue #IYTTM 文件管理没有分页功能的问题

上级 c11e65e8
隐藏空白更改
内联 并排
Showing with 130 addition and 107 deletion
blog-admin/src/main/resources/static/assets/css/zhyd.core.css
浏览文件 @ 1103255f
......@@ -4971,7 +4971,8 @@ ul, menu, dir {
/*transform: scale(1.1);*/
}
.material-box ul li.material-page {
.material-box ul li.material-page,
.file-container ul li.file-page {
width: 100%;
height: 38px;
border: 0 solid #ddd;
......@@ -4981,16 +4982,19 @@ ul, menu, dir {
float: right;
}
.material-box ul li.material-page .material-page-body {
.material-box ul li.material-page .material-page-body,
.file-container ul li.file-page .file-body {
width: 100%;
height: 100%;
}
.material-box ul li.material-page .material-page-body a, .material-box ul li.material-page .material-page-body input {
.material-box ul li.material-page .material-page-body a, .material-box ul li.material-page .material-page-body input,
.file-container ul li.file-page .file-page-body a, .file-container ul li.file-page .file-page-body input {
display: inline-block
}
.material-box ul li.material-page .material-page-body input {
.material-box ul li.material-page .material-page-body input,
.file-container ul li.file-page .file-page-body input {
width: 50px;
position: relative;
top: -2px;
......
blog-admin/src/main/resources/templates/file/list.ftl
浏览文件 @ 1103255f
......@@ -25,21 +25,7 @@
</div>
<div class="x_panel">
<form id="file-form">
<div class="x_content" id="file-container">
<#--<div class="col-md-55">
<div class="thumbnail selected">
<div class="image view view-first">
<img style="display: block;margin: 0 auto;margin-top: 10px;" src="/assets/images/loading.gif" alt="image" />
<div class="selected-mask">
<div class="inner"></div>
<div class="icon"></div>
</div>
</div>
<div class="caption">
<p>正在加载...</p>
</div>
</div>
</div>-->
<div class="x_content file-container" id="file-container">
<div class="col-md-55">
<div class="thumbnail">
<div class="image view view-first">
......@@ -69,101 +55,134 @@
<script>
var curSstorageType = '${config.storageType}';
$(function () {
$.ajax({
url: "/file/list",
type: "POST",
success: function (json) {
var tpl = '{{#list}}<div class="col-md-55">\n' +
' <div class="thumbnail">\n' +
' <div class="image view view-first pointer file-item">\n' +
' <img style="width: 100%; display: block;" src="{{fullFilePath}}" onerror="this.alt=\'图片加载失败\'" alt="{{originalFileName}}" title="{{originalFileName}}" />\n' +
' <div class="vmask">\n' +
' <p>点击选中</p>\n' +
' <div class="tools tools-bottom">\n' +
' <a href="{{fullFilePath}}" class="file-icon showImage" title="{{filePath}}"><i class="fa fa-eye"></i></a>\n' +
' <a href="{{fullFilePath}}" target="_blank" class="file-icon" title="复制地址（打开标签后复制）"><i class="fa fa-link"></i></a>\n' +
' <a class="pointer file-icon" data-event="del" data-value="{{id}}" data-storage-type="{{storageType}}" title="删除文件"><i class="fa fa-times"></i></a>\n' +
' </div>\n' +
' </div>\n' +
' <div class="selected-mask">\n' +
' <input type="checkbox" class="square mask-checkbox" name="ids" value="{{id}}" data-storage-type="{{storageType}}" />' +
' </div>\n' +
' </div>\n' +
' <div class="caption">\n' +
' <p><span title="{{originalFileName}}">{{originalFileName}}</span><img src="/assets/images/icons/{{storageType}}.svg" alt="{{storageType}}" title="{{storageType}}"></p>\n' +
' </div>\n' +
' </div>\n' +
' </div>{{/list}}';
var html = Mustache.render(tpl, json);
$("#file-container").html(html);
gentelella.initiICheck();
$('.mask-checkbox').on('ifChanged', function (event) {
var $this = $(this),
$thumbnail = $this.parents("div.thumbnail");
if ($this.is(':checked')) {
$thumbnail.addClass("selected");
} else {
$thumbnail.removeClass("selected");
}
});
bindFileItemEvent();
function bindFileItemEvent() {
$(".file-item").click(function () {
var $checkbox = $(this).find('.mask-checkbox');
$checkbox.iCheck($checkbox.is(':checked') ? "uncheck" : "check");
loadData(1);
function loadData(pageNumber){
$.ajax({
url: "/file/list",
data: {pageNumber: pageNumber},
type: "POST",
success: function (json) {
var tpl = '{{#list}}<div class="col-md-55">\n' +
' <div class="thumbnail">\n' +
' <div class="image view view-first pointer file-item">\n' +
' <img style="width: 100%; display: block;" src="{{fullFilePath}}" onerror="this.alt=\'图片加载失败\'" alt="{{originalFileName}}" title="{{originalFileName}}" />\n' +
' <div class="vmask">\n' +
' <p>点击选中</p>\n' +
' <div class="tools tools-bottom">\n' +
' <a href="{{fullFilePath}}" class="file-icon showImage" title="{{filePath}}"><i class="fa fa-eye"></i></a>\n' +
' <a href="{{fullFilePath}}" target="_blank" class="file-icon" title="复制地址（打开标签后复制）"><i class="fa fa-link"></i></a>\n' +
' <a class="pointer file-icon" data-event="del" data-value="{{id}}" data-storage-type="{{storageType}}" title="删除文件"><i class="fa fa-times"></i></a>\n' +
' </div>\n' +
' </div>\n' +
' <div class="selected-mask">\n' +
' <input type="checkbox" class="square mask-checkbox" name="ids" value="{{id}}" data-storage-type="{{storageType}}" />' +
' </div>\n' +
' </div>\n' +
' <div class="caption">\n' +
' <p><span title="{{originalFileName}}">{{originalFileName}}</span><img src="/assets/images/icons/{{storageType}}.svg" alt="{{storageType}}" title="{{storageType}}"></p>\n' +
' </div>\n' +
' </div>\n' +
' </div>{{/list}}';
var html = Mustache.render(tpl, json);
var pageTpl = '<ul class="list-unstyled">{{#data}}<li class="file-page">\n' +
' <div class="file-page-body">\n' +
' {{#hasPreviousPage}}<a class="btn btn-default btn-sm file-pagination" data-page="{{prePage}}">\n' +
' <i class="fa fa-caret-left"></i>\n' +
' </a>{{/hasPreviousPage}}<span style="margin-right: 5px;">{{pageNum}}/{{pages}}</span>{{#hasNextPage}}<a class="btn btn-default btn-sm file-pagination" data-page="{{nextPage}}">\n' +
' <i class="fa fa-caret-right"></i>\n' +
' </a>{{/hasNextPage}}<input class="form-control input-sm file-input">\n' +
' <a class="btn btn-default btn-sm file-jump">\n' +
' Go\n' +
' </a>\n' +
' \n' +
' </div>\n' +
'</li>{{/data}}</ul>';
html += Mustache.render(pageTpl, {data: json});
$("#file-container").html(html);
// 绑定分页点击事件
$(".file-pagination").unbind("click").click(function () {
var $this = $(this);
var pageNumber = $this.data("page");
loadData(!pageNumber || isNaN(pageNumber) ? 1 : parseInt(pageNumber));
});
}
$("#btn_delete_ids").click(function () {
var canBeDeleted = true;
$('.mask-checkbox').each(function () {
// 绑定分页-跳转页面点击事件
$(".file-jump").unbind("click").click(function () {
var $this = $(this);
var storageType = $this.data("storage-type");
if($this.is(':checked') && storageType != curSstorageType) {
canBeDeleted = false;
return false;
var jumpTarget = $(".file-input").val();
loadData(!jumpTarget || isNaN(jumpTarget) ? 1 : parseInt(jumpTarget));
});
gentelella.initiICheck();
$('.mask-checkbox').on('ifChanged', function (event) {
var $this = $(this),
$thumbnail = $this.parents("div.thumbnail");
if ($this.is(':checked')) {
$thumbnail.addClass("selected");
} else {
$thumbnail.removeClass("selected");
}
});
if(!canBeDeleted) {
$.alert.error("【不可删除】当前选择的文件存储于不同的云存储平台！");
return false;
}
del($("#file-form").serialize());
});
$(".file-icon").click(function () {
$(".file-item").unbind("click");
var event = $(this).data("event");
var id = $(this).data("value");
var storageType = $(this).data("storage-type");
if(event) {
del({'ids': id}, storageType);
} else {
setTimeout(function () {
bindFileItemEvent();
})
}
});
function del(data, storageType){
if(storageType && storageType != curSstorageType) {
$.alert.error("【不可删除】该文件存储于[" + storageType + "]，当前系统的云存储类型为[" + curSstorageType + "]");
return false;
bindFileItemEvent();
function bindFileItemEvent() {
$(".file-item").click(function () {
var $checkbox = $(this).find('.mask-checkbox');
$checkbox.iCheck($checkbox.is(':checked') ? "uncheck" : "check");
});
}
$.alert.confirm("确定删除该选中的文件？不可恢复，请确认！", function () {
$.ajax({
type: "POST",
url: "/file/remove",
traditional: true,
data: data,
success: function (json) {
$.alert.ajaxSuccess(json, function () {
window.location.reload();
});
$("#btn_delete_ids").click(function () {
var canBeDeleted = true;
$('.mask-checkbox').each(function () {
var $this = $(this);
var storageType = $this.data("storage-type");
if($this.is(':checked') && storageType != curSstorageType) {
canBeDeleted = false;
return false;
}
});
if(!canBeDeleted) {
$.alert.error("【不可删除】当前选择的文件存储于不同的云存储平台！");
return false;
}
del($("#file-form").serialize());
});
$(".file-icon").click(function () {
$(".file-item").unbind("click");
var event = $(this).data("event");
var id = $(this).data("value");
var storageType = $(this).data("storage-type");
if(event) {
del({'ids': id}, storageType);
} else {
setTimeout(function () {
bindFileItemEvent();
})
}
});
function del(data, storageType){
if(storageType && storageType != curSstorageType) {
$.alert.error("【不可删除】该文件存储于[" + storageType + "]，当前系统的云存储类型为[" + curSstorageType + "]");
return false;
}
$.alert.confirm("确定删除该选中的文件？不可恢复，请确认！", function () {
$.ajax({
type: "POST",
url: "/file/remove",
traditional: true,
data: data,
success: function (json) {
$.alert.ajaxSuccess(json, function () {
window.location.reload();
});
}
})
})
})
}
},
error: $.alert.ajaxError
});
}
},
error: $.alert.ajaxError
});
}
$("#btn_add").click(function () {
$("#addOrUpdateModal").modal('show');
$(".addOrUpdateBtn").unbind('click').click(function () {
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或