document.writeln("<div id=\'outerdiv\' style=\'position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2;width:100%;height:100%;display:none;\'>");
document.writeln("<div id=\'innerdiv\' style=\'position:absolute;\'>");
document.writeln("<img id=\'bigimg\' style=\'border:5px solid #fff;\' src=\'\' /></div></div>");
layui.use(['form', 'layer'], function() {
var form = layui.form;
var layer = layui.layer;
var $ = layui.jquery;
// 页面加载完成后执行
$(function() {
// 图片放大功能
$(".pimg").click(function() {
var _this = $(this);
imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);
});
// 列表展开/收缩
$('#opener').click(() => $('.icba-list-content').addClass('layui-show'));
$('#toggle').click(() => $('.icba-list-content').toggleClass('layui-show'));
// 多行文本域自动高度
$.fn.autoHeight = function() {
return this.each(function() {
const resize = () => {
this.style.height = 'auto';
this.style.height = (this.scrollHeight) + 'px';
};
resize();
$(this).on('keyup input', resize);
});
};
$('textarea[autoHeight]').autoHeight();
// 禁用拼写检查
$('textarea').prop('spellcheck', false);
// 指定渲染容器
const mathContainer = document.getElementById('katex');
renderMathInElement(mathContainer, {
delimiters: [
{ left: '```math', right: '```', display: true },
{ left: '`$', right: '$`', display: false }
],
throwOnError: false
});
});
// 图片放大方法
function imgShow(outerdiv, innerdiv, bigimg, _this) {
var src = _this.attr("src");
$(bigimg).attr("src", src);
$("<img/>").attr("src", src).load(function() {
var windowW = $(window).width();
var windowH = $(window).height();
var realWidth = this.width;
var realHeight = this.height;
var imgWidth, imgHeight;
var scale = 0.9;
if (realHeight > windowH * scale) {
imgHeight = windowH * scale;
imgWidth = imgHeight / realHeight * realWidth;
if (imgWidth > windowW * scale) {
imgWidth = windowW * scale;
}
} else if (realWidth > windowW * scale) {
imgWidth = windowW * scale;
imgHeight = imgWidth / realWidth * realHeight;
} else {
imgWidth = realWidth;
imgHeight = realHeight;
}
$(bigimg).css("width", imgWidth);
var w = (windowW - imgWidth) / 2 - 5;
var h = (windowH - imgHeight) / 2 - 5;
$(innerdiv).css({ "top": h, "left": w });
$(outerdiv).fadeIn("fast");
});
$(outerdiv).click(function() {
$(this).fadeOut("fast");
});
}
// 删除数据方法
window.setDelete = function(v, n) {
var url = window.location.href;
var path = encodeURIComponent(url);
var value = window.atob(decodeURIComponent(v));
var name = window.atob(decodeURIComponent(n));
layer.confirm('你确定要删除' + name + '-' + value + '的这条信息吗', {
btn: ['确定', '取消']
}, function() {
location.href = "/Z/ZZZ/setDelete.php?f=" + v + "&t=" + n + "&p=" + path;
}, function() {
layer.msg('已取消操作！');
});
};
// 临时标识恢复默认值
window.setFlag = function(v, n) {
var url = window.location.href;
var path = encodeURIComponent(url);
var value = window.atob(decodeURIComponent(v));
var name = window.atob(decodeURIComponent(n));
layer.confirm('你确定要' + name + '的临时标识全修改为' + value + '吗', {
btn: ['确定', '取消']
}, function() {
location.href = "/Z/ZZZ/setFlag.php?f=" + v + "&t=" + n + "&p=" + path;
}, function() {
layer.msg('已取消操作！');
});
};
// 临时序号恢复默认值
window.setSort = function(v, n) {
var url = window.location.href;
var path = encodeURIComponent(url);
var value = window.atob(decodeURIComponent(v));
var name = window.atob(decodeURIComponent(n));
layer.confirm('你确定要' + name + '的临时序号全修改为' + value + '吗', {
btn: ['确定', '取消']
}, function() {
location.href = "/Z/ZZZ/setSort.php?f=" + v + "&t=" + n + "&p=" + path;
}, function() {
layer.msg('已取消操作！');
});
};
// 自定义处理
window.setTable = function(str) {
var url = window.location.href;
var path = encodeURIComponent(url);
layer.confirm(decodeURIComponent(str) + '<br>你确定要修改吗', {
btn: ['确定', '取消']
}, function() {
location.href = "/Z/ZZZ/setTable.php?f=" + str + "&p=" + path;
}, function() {
layer.msg('已取消操作！');
});
};
// 下拉菜单二级联动（添加防抖处理）
function handleSelectChange(selectId, targetId, filterUrl) {
form.on('select(' + selectId + ')', debounce(function(data) {
const id = data.value;
const tb = $(data.elem).data('tb');
const mid = $(data.elem).data('mid');
if (id === '0') return;
const $target = $(targetId);
$target.empty().append('<option value="">加载中...</option>');
form.render('select');
$.post(filterUrl, { id, tb, mid }, function(data) {
$target.html(data);
form.render('select');
}).fail(function() {
$target.html('<option value="">加载失败</option>');
form.render('select');
});
}, 300));
}
// 防抖函数
function debounce(func, delay) {
let timer;
return function() {
const context = this;
const args = arguments;
clearTimeout(timer);
timer = setTimeout(() => func.apply(context, args), delay);
};
}
// 注册所有下拉菜单事件
handleSelectChange('cbig_idFilter', '#cmin_id', '/Z/ZZZ/filterCbig_id.php');
handleSelectChange('c2big_idFilter', '#c2min_id', '/Z/ZZZ/filterC2big_id.php');
handleSelectChange('unitbig_idFilter', '#unitmin_id', '/Z/ZZZ/filterUnitbig_id.php');
handleSelectChange('unitbig2_idFilter', '#unitmin2_id', '/Z/ZZZ/filterUnitbig_id.php');
handleSelectChange('grp_idFilter', '#tt_id', '/Z/ZZZ/filterGrp_id.php');
});
代码分析
- 这段代码是一个基于 Layui 框架的前端页面脚本，实现了图片查看、列表操作、表单处理等功能。下面是对代码的详细分析：
主要功能模块
图片查看器
- 使用固定定位的遮罩层实现图片查看功能
- 点击带有pimg类的图片时触发
- 图片会根据窗口大小自动调整，最大不超过窗口的 90% 尺寸
- 点击遮罩层可关闭查看器
列表操作
- 提供展开 / 收缩列表的按钮
- 支持多行文本域的自动高度调整
- 禁用了文本域的拼写检查功能
数学公式渲染
- 使用 KaTeX 库渲染数学公式
- 支持两种格式的公式标记：math(块级) 和 `$(行内)
数据操作确认
- 删除数据前的确认对话框
- 修改临时标识和序号的确认对话框
- 自定义表格处理的确认对话框
下拉菜单联动
- 实现了二级下拉菜单联动功能
- 使用防抖处理优化频繁选择的情况
- 通过 AJAX 请求动态加载下级选项
浙公网安备 33010602011771号