|
|
$(function () {
|
|
|
// 加载弹出层和元素模块
|
|
|
layui.use(['form', 'element'], function () {
|
|
|
layer = layui.layer; // 获取layui的layer模块
|
|
|
element = layui.element; // 获取layui的element模块
|
|
|
});
|
|
|
|
|
|
// 定义tab操作
|
|
|
var tab = {
|
|
|
tabAdd: function (title, url, id) {
|
|
|
// 新增一个Tab项
|
|
|
element.tabAdd('xbs_tab', {
|
|
|
title: title, // 设置tab的标题
|
|
|
content: '<iframe tab-id="' + id + '" frameborder="0" src="' + url + '" scrolling="yes" class="x-iframe"></iframe>', // 设置tab的内容为iframe
|
|
|
id: id // 设置tab的唯一标识id
|
|
|
})
|
|
|
},
|
|
|
tabDelete: function (othis) {
|
|
|
// 删除指定Tab项
|
|
|
element.tabDelete('xbs_tab', '44'); // 删除id为44的Tab项（示例）
|
|
|
othis.addClass('layui-btn-disabled'); // 禁用删除按钮
|
|
|
},
|
|
|
tabChange: function (id) {
|
|
|
// 切换到指定Tab项
|
|
|
element.tabChange('xbs_tab', id); // 切换到指定的Tab项
|
|
|
}
|
|
|
};
|
|
|
|
|
|
// 表格多选功能的处理
|
|
|
tableCheck = {
|
|
|
init: function () {
|
|
|
// 绑定复选框点击事件
|
|
|
$(".layui-form-checkbox").click(function (event) {
|
|
|
if ($(this).hasClass('layui-form-checked')) {
|
|
|
$(this).removeClass('layui-form-checked');
|
|
|
if ($(this).hasClass('header')) {
|
|
|
$(".layui-form-checkbox").removeClass('layui-form-checked'); // 如果是header则取消所有选择
|
|
|
}
|
|
|
} else {
|
|
|
$(this).addClass('layui-form-checked');
|
|
|
if ($(this).hasClass('header')) {
|
|
|
$(".layui-form-checkbox").addClass('layui-form-checked'); // 如果是header则选中所有复选框
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
getData: function () {
|
|
|
// 获取所有选中的复选框对应的data-id
|
|
|
var obj = $(".layui-form-checked").not('.header'); // 排除header行
|
|
|
var arr = [];
|
|
|
obj.each(function (index, el) {
|
|
|
arr.push(obj.eq(index).attr('data-id')); // 将选中的data-id添加到数组
|
|
|
});
|
|
|
return arr; // 返回选中的项的id数组
|
|
|
}
|
|
|
};
|
|
|
|
|
|
// 开启表格多选
|
|
|
tableCheck.init();
|
|
|
|
|
|
// 左侧菜单切换事件
|
|
|
$('.container .left_open i').click(function (event) {
|
|
|
if ($('.left-nav').css('left') == '0px') {
|
|
|
// 如果左侧菜单是打开的，则关闭它
|
|
|
$('.left-nav').animate({ left: '-221px' }, 100); // 动画收起菜单
|
|
|
$('.page-content').animate({ left: '0px' }, 100); // 调整页面内容区域
|
|
|
$('.page-content-bg').hide(); // 隐藏背景遮罩
|
|
|
} else {
|
|
|
// 如果左侧菜单是关闭的，则打开它
|
|
|
$('.left-nav').animate({ left: '0px' }, 100); // 动画展开菜单
|
|
|
$('.page-content').animate({ left: '221px' }, 100); // 调整页面内容区域
|
|
|
if ($(window).width() < 768) {
|
|
|
$('.page-content-bg').show(); // 在小屏幕下显示背景遮罩
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
|
|
|
// 点击背景遮罩关闭菜单
|
|
|
$('.page-content-bg').click(function (event) {
|
|
|
$('.left-nav').animate({ left: '-221px' }, 100); // 动画收起菜单
|
|
|
$('.page-content').animate({ left: '0px' }, 100); // 调整页面内容区域
|
|
|
$(this).hide(); // 隐藏背景遮罩
|
|
|
});
|
|
|
|
|
|
// 关闭tab时移除图标
|
|
|
$('.layui-tab-close').click(function (event) {
|
|
|
$('.layui-tab-title li').eq(0).find('i').remove(); // 移除第一个Tab项的图标
|
|
|
});
|
|
|
|
|
|
// 默认隐藏除fid=0的栏目项
|
|
|
$("tbody.x-cate tr[fid!='0']").hide();
|
|
|
|
|
|
// 栏目多级显示效果，点击展开/收起子栏目
|
|
|
$('.x-show').click(function () {
|
|
|
if ($(this).attr('status') == 'true') {
|
|
|
$(this).html(''); // 修改图标为展开状态
|
|
|
$(this).attr('status', 'false'); // 设置状态为false
|
|
|
cateId = $(this).parents('tr').attr('cate-id'); // 获取当前栏目ID
|
|
|
$("tbody tr[fid=" + cateId + "]").show(); // 显示当前栏目下的子栏目
|
|
|
} else {
|
|
|
cateIds = []; // 清空cateIds数组
|
|
|
$(this).html(''); // 修改图标为收起状态
|
|
|
$(this).attr('status', 'true'); // 设置状态为true
|
|
|
cateId = $(this).parents('tr').attr('cate-id'); // 获取当前栏目ID
|
|
|
getCateId(cateId); // 获取当前栏目的所有子栏目ID
|
|
|
for (var i in cateIds) {
|
|
|
// 隐藏所有子栏目并修改其图标为收起状态
|
|
|
$("tbody tr[cate-id=" + cateIds[i] + "]").hide().find('.x-show').html('').attr('status', 'true');
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
|
|
|
// 左侧菜单项点击事件
|
|
|
$('.left-nav #nav li').click(function (event) {
|
|
|
if ($(this).children('.sub-menu').length) {
|
|
|
// 如果有子菜单
|
|
|
if ($(this).hasClass('open')) {
|
|
|
$(this).removeClass('open');
|
|
|
$(this).find('.nav_right').html(''); // 修改图标为展开
|
|
|
$(this).children('.sub-menu').stop().slideUp(); // 隐藏子菜单
|
|
|
$(this).siblings().children('.sub-menu').slideUp(); // 隐藏兄弟菜单
|
|
|
} else {
|
|
|
$(this).addClass('open');
|
|
|
$(this).children('a').find('.nav_right').html(''); // 修改图标为收起
|
|
|
$(this).children('.sub-menu').stop().slideDown(); // 显示子菜单
|
|
|
$(this).siblings().children('.sub-menu').stop().slideUp(); // 隐藏兄弟菜单
|
|
|
$(this).siblings().find('.nav_right').html(''); // 修改兄弟菜单图标为展开
|
|
|
$(this).siblings().removeClass('open'); // 移除兄弟菜单的open类
|
|
|
}
|
|
|
} else {
|
|
|
var url = $(this).children('a').attr('_href'); // 获取菜单项链接
|
|
|
var title = $(this).find('cite').html(); // 获取菜单项标题
|
|
|
var index = $('.left-nav #nav li').index($(this)); // 获取菜单项索引
|
|
|
|
|
|
// 检查该Tab是否已打开
|
|
|
for (var i = 0; i < $('.x-iframe').length; i++) {
|
|
|
if ($('.x-iframe').eq(i).attr('tab-id') == index + 1) {
|
|
|
tab.tabChange(index + 1); // 切换到已打开的Tab
|
|
|
event.stopPropagation();
|
|
|
return;
|
|
|
}
|
|
|
};
|
|
|
|
|
|
// 否则新建Tab项并切换
|
|
|
tab.tabAdd(title, url, index + 1);
|
|
|
tab.tabChange(index + 1);
|
|
|
}
|
|
|
|
|
|
event.stopPropagation(); // 阻止事件冒泡
|
|
|
});
|
|
|
|
|
|
});
|
|
|
|
|
|
var cateIds = [];
|
|
|
|
|
|
// 获取指定栏目ID下的所有子栏目ID
|
|
|
function getCateId(cateId) {
|
|
|
$("tbody tr[fid=" + cateId + "]").each(function (index, el) {
|
|
|
id = $(el).attr('cate-id'); // 获取子栏目ID
|
|
|
cateIds.push(id); // 将子栏目ID加入数组
|
|
|
getCateId(id); // 递归获取更深层次的子栏目ID
|
|
|
});
|
|
|
}
|
|
|
|
|
|
/* 弹出层相关函数 */
|
|
|
|
|
|
/*
|
|
|
弹出层函数，显示一个iframe窗口
|
|
|
title 弹出层的标题
|
|
|
url 请求的URL地址
|
|
|
id 数据ID
|
|
|
w 弹出层宽度（缺省调默认值）
|
|
|
h 弹出层高度（缺省调默认值）
|
|
|
*/
|
|
|
function x_admin_show(title, url, w, h) {
|
|
|
if (title == null || title == '') {
|
|
|
title = false; // 默认无标题
|
|
|
};
|
|
|
if (url == null || url == '') {
|
|
|
url = "404.html"; // 默认URL为404页面
|
|
|
};
|
|
|
if (w == null || w == '') {
|
|
|
w = ($(window).width() * 0.9); // 默认宽度为窗口宽度的90%
|
|
|
};
|
|
|
if (h == null || h == '') {
|
|
|
h = ($(window).height() - 50); // 默认高度为窗口高度减去50
|
|
|
};
|
|
|
// 打开弹出层
|
|
|
layer.open({
|
|
|
type: 2, // 弹出层类型为iframe
|
|
|
area: [w + 'px', h + 'px'], // 设置弹出层大小
|
|
|
fix: false, // 不固定
|
|
|
maxmin: true, // 开启最大化和最小化功能
|
|
|
shadeClose: true, // 点击遮罩关闭
|
|
|
shade: 0.4, // 设置遮罩透明度
|
|
|
title: title, // 设置弹出层标题
|
|
|
content: url // 设置弹出层内容为iframe
|
|
|
});
|
|
|
}
|
|
|
|
|
|
/* 关闭弹出框 */
|
|
|
function x_admin_close() {
|
|
|
var index = parent.layer.getFrameIndex(window.name); // 获取iframe的索引
|
|
|
parent.layer.close(index); // 关闭弹出框
|
|
|
}
|
