原因
fastadmin框架自带的表格图片格式只能放大,无法做到鼠标滚轮缩放
局部替换解决方案:
1.下载
下载它的css、js文件,
纯JS版本:https://github.com/fengyuanchen/viewerjs
jQuery 版本:https://github.com/fengyuanchen/viewerjs
把css和js放到项目的public/static中
2.使用
2.1. 在public/assets/css/backend.css中引入@import url(“…/…/static/viewer.css”);
如有backend.min.css,将backend.css的内容复制进去,保持统一
2.2. 在public/assets/js/require-backend.js中引入’viewer’: ‘…/…/static/viewer’,
如有require-backend.min.js,将require-backend.js的内容复制进去,保持统一
2.3. 然后在需要的页面对应的js中引入viewer
2.4. 重新定义image
Table.api.events.image = {
'load .img-center': function (e, value, row, index) {
$('.img-center').viewer({
url: 'data-original'
});
},
}
然后就ok了
全局替换
1.下载
下载它的css、js文件,
纯JS版本:https://github.com/fengyuanchen/viewerjs
jQuery 版本:https://github.com/fengyuanchen/viewerjs
把css和js放到项目的public/static中
2.使用
2.1. 在public/assets/css/backend.css中引入@import url(“…/…/static/viewer.css”);
如有backend.min.css,将backend.css的内容复制进去,保持统一
2.2. 在public/assets/js/require-backend.js中引入’viewer’: ‘…/…/static/viewer’,
如有require-backend.min.js,将require-backend.js的内容复制进去,保持统一
2.3. 然后在public/assets/js/require-table.js中引入viewer
2.4. 重新定义Table.api.formatter.image和Table.api.formatter.images
image: function (value, row, index) {
value = value == null || value.length === 0 ? '' : value.toString();
value = value ? value : '/assets/img/blank.gif';
var classname = typeof this.classname !== 'undefined' ? this.classname : 'img-sm img-center';
var url = Fast.api.cdnurl(value, true);
url = url.match(/^(\/|data:image\\)/) ? url : url + Config.upload.thumbstyle;
return '<ul class="viewer"><li style="list-style:none;display:inline-block;"><img data-original="' + url + '" class="' + classname + '" src="' + url + '" /></li></ul>';
},
images: function (value, row, index) {
value = value == null || value.length === 0 ? '' : value.toString();
var classname = typeof this.classname !== 'undefined' ? this.classname : 'img-sm img-center';
var arr = value != '' ? value.split(',') : [];
var html = [];
var url;
$.each(arr, function (i, value) {
value = value ? value : '/assets/img/blank.gif';
url = Fast.api.cdnurl(value, true);
url = url.match(/^(\/|data:image\\)/) ? url : url + Config.upload.thumbstyle;
html.push('<li style="list-style:none;display:inline-block;"><img data-original="' + url + '" class="' + classname + '" src="' + url + '" /></li>');
});
return '<ul class="viewer">'+html.join(' ')+'</ul>';
},
2.5. 重新定义Table.api.events.image
'load .img-center': function (e, value, row, index) {
$('.viewer').viewer({
url: 'data-original'
});
},
然后就ok了