diff --git a/web/js/layfilter.js b/web/js/layfilter.js
index e109d5c..114ac18 100644
--- a/web/js/layfilter.js
+++ b/web/js/layfilter.js
@@ -1,147 +1,164 @@
-layui.define(['jquery', 'layer'], function (exports){
- var $ = layui.jquery;
- var chekedArr = {};
- var layfilter = {
- render:function(options){
- var url = options.url;
- var flag = true;
- //传入了地址,则直接将此地址覆盖
+layui.define(['jquery', 'layer'], function (exports){ // 定义一个模块,依赖 'jquery' 和 'layer'
+ var $ = layui.jquery; // 使用 layui 的 jQuery
+ var chekedArr = {}; // 初始化一个空对象用于存储选中的过滤项
+
+ var layfilter = { // 定义 layfilter 对象
+ render:function(options){ // 渲染过滤组件的方法
+ var url = options.url; // 获取传入的 url 地址
+ var flag = true; // 初始化标志位,用于控制是否继续渲染
+
+ // 如果传入了 url,则从该地址获取数据
if(url){
- $.getJSON(url,options.where,function(res){
- if(res.code == 0){
- var data = res.data;
- flase = true;
- layfilter.init(options,data);
+ $.getJSON(url, options.where, function(res){ // 通过 GET 请求获取 JSON 数据
+ if(res.code == 0){ // 如果返回的 code 为 0,表示成功
+ var data = res.data; // 获取返回的数据
+ flase = true; // 设置标志位为 true
+ layfilter.init(options, data); // 调用 init 方法,传入选项和数据进行初始化
}else{
- layer.msg(res.msg||'查询过滤组件数据异常',{icon:2});
- flag = false
+ layer.msg(res.msg || '查询过滤组件数据异常', {icon: 2}); // 显示错误信息
+ flag = false; // 如果失败,设置 flag 为 false
}
- })
+ });
}
- if(!flag){
+ if(!flag){ // 如果 flag 为 false,直接返回,不执行后续操作
return;
}
},
- init:function(options,dataSource){
- var elem = options.elem;
- var $dom = $(elem);
- var itemWidth = options.itemWidth
- var arr = {};
- var $table = $('
');
- for(var i=0;i');
- var $td1 = $(''+dataSource[i].title+': | ');
- var $td2 = $(' | ');
- var type = dataSource[i].type;
- if(!type){
- console.warn('第'+(i+1)+'个元素的类型[type]为空设为默认值[radio]');
+ init:function(options, dataSource){ // 初始化过滤组件的方法
+ var elem = options.elem; // 获取传入的元素
+ var $dom = $(elem); // 获取该元素的 jQuery 对象
+ var itemWidth = options.itemWidth; // 获取项的宽度
+ var arr = {}; // 初始化一个空对象,用于存储选中的项
+ var $table = $(''); // 创建一个新的表格元素
+
+ // 遍历数据源,生成每一行
+ for(var i = 0; i < dataSource.length; i++){
+ var $tr = $('
'); // 创建表格行
+ var $td1 = $('' + dataSource[i].title + ': | '); // 创建第一列(标题)
+ var $td2 = $(' | '); // 创建第二列(选项列表)
+ var type = dataSource[i].type; // 获取当前项的类型
+ if(!type){ // 如果没有设置类型,默认为 'radio'
+ console.warn('第' + (i + 1) + '个元素的类型[type]为空设为默认值[radio]');
type = 'radio';
}
- var $ul = $('');
- var width = itemWidth && itemWidth.length>0 ? (itemWidth.length>i ? itemWidth[i]:itemWidth[itemWidth.length-1]):80;
- arr[dataSource[i].name]=[];
- for(var j=0;j'); // 创建列表元素
+
+ // 如果传入了项宽度,则根据索引设置宽度,否则默认为 80
+ var width = itemWidth && itemWidth.length > 0 ? (itemWidth.length > i ? itemWidth[i] : itemWidth[itemWidth.length - 1]) : 80;
+ arr[dataSource[i].name] = []; // 初始化存储选中的项的数组
+
+ // 遍历当前项的数据,生成每一个选项
+ for(var j = 0; j < dataSource[i].data.length; j++){
+ var item = dataSource[i].data;
+ var className = 'layfilter-item'; // 默认项的类名
+
+ // 如果该项已被选中,则添加选中类
+ if(item[j].checked && item[j].checked == 'true'){
className = "layfilter-item layfilter-item-checked";
- arr[dataSource[i].name].push({name:item[j].name,value:item[j].value});
+ arr[dataSource[i].name].push({name: item[j].name, value: item[j].value}); // 将选中的项添加到选中数组
}
- //判断是否禁用
- if(item[j].disabled && item[j].disabled=='true'){
+
+ // 判断该项是否被禁用
+ if(item[j].disabled && item[j].disabled == 'true'){
+ // 如果禁用,添加禁用样式
$ul.append(''+item[j].name+'');
}else{
+ // 如果未禁用,正常添加项
$ul.append(''+item[j].name+'');
}
-
}
+
+ // 将列表添加到第二列,并将整行添加到表格中
$td2.append($ul);
$tr.append($td1).append($td2);
$table.append($tr);
}
- $dom.append($table);
- chekedArr=arr;
- //注册点击事件
- $('.filterTable tr td li a').bind('click',function(){
- if($(this).attr('disabled')){
+
+ $dom.append($table); // 将表格添加到指定的 DOM 元素中
+ chekedArr = arr; // 更新选中的项
+
+ // 注册点击事件,处理项的选中与取消选中
+ $('.filterTable tr td li a').bind('click', function(){
+ if($(this).attr('disabled')){ // 如果该项禁用,返回不做处理
return;
}
- var itemType = $(this).parent().parent().attr('type');
- var name = $(this).parent().parent().attr('name');
- //取消选择
+
+ var itemType = $(this).parent().parent().attr('type'); // 获取当前项的类型
+ var name = $(this).parent().parent().attr('name'); // 获取当前项的名称
+
+ // 如果该项已被选中,取消选中
if($(this).parent().hasClass('layfilter-item-checked')){
- $(this).parent().removeClass('layfilter-item-checked');
- var obj = chekedArr[name]||[];
- for(var i=0;i'
- ,id: id
- })
- }
- ,tabDelete: function(othis){
- //删除指定Tab项
- element.tabDelete('xbs_tab', '44'); //删除:“商品管理”
-
-
- othis.addClass('layui-btn-disabled');
- }
- ,tabChange: function(id){
- //切换到指定Tab项
- element.tabChange('xbs_tab', id); //切换到:用户管理
+ // 定义tab操作
+ var tab = {
+ tabAdd: function (title, url, id) {
+ // 新增一个Tab项
+ element.tabAdd('xbs_tab', {
+ title: title, // 设置tab的标题
+ content: '', // 设置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')){
+ 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');
+ if ($(this).hasClass('header')) {
+ $(".layui-form-checkbox").removeClass('layui-form-checked'); // 如果是header则取消所有选择
}
- }else{
+ } else {
$(this).addClass('layui-form-checked');
- if($(this).hasClass('header')){
- $(".layui-form-checkbox").addClass('layui-form-checked');
+ if ($(this).hasClass('header')) {
+ $(".layui-form-checkbox").addClass('layui-form-checked'); // 如果是header则选中所有复选框
}
}
-
});
},
- getData:function () {
- var obj = $(".layui-form-checked").not('.header');
- var arr=[];
- obj.each(function(index, el) {
- arr.push(obj.eq(index).attr('data-id'));
+ 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;
+ 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();
+
+ // 左侧菜单切换事件
+ $('.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();
+ // 点击背景遮罩关闭菜单
+ $('.page-content-bg').click(function (event) {
+ $('.left-nav').animate({ left: '-221px' }, 100); // 动画收起菜单
+ $('.page-content').animate({ left: '0px' }, 100); // 调整页面内容区域
+ $(this).hide(); // 隐藏背景遮罩
});
- $('.layui-tab-close').click(function(event) {
- $('.layui-tab-title li').eq(0).find('i').remove();
+ // 关闭tab时移除图标
+ $('.layui-tab-close').click(function (event) {
+ $('.layui-tab-title li').eq(0).find('i').remove(); // 移除第一个Tab项的图标
});
- $("tbody.x-cate tr[fid!='0']").hide();
- // 栏目多级显示效果
+ // 默认隐藏除fid=0的栏目项
+ $("tbody.x-cate tr[fid!='0']").hide();
+
+ // 栏目多级显示效果,点击展开/收起子栏目
$('.x-show').click(function () {
- if($(this).attr('status')=='true'){
- $(this).html('');
- $(this).attr('status','false');
- cateId = $(this).parents('tr').attr('cate-id');
- $("tbody tr[fid="+cateId+"]").show();
- }else{
- cateIds = [];
- $(this).html('');
- $(this).attr('status','true');
- cateId = $(this).parents('tr').attr('cate-id');
- getCateId(cateId);
+ 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');
+ // 隐藏所有子栏目并修改其图标为收起状态
+ $("tbody tr[cate-id=" + cateIds[i] + "]").hide().find('.x-show').html('').attr('status', 'true');
}
- }
- })
+ }
+ });
- //左侧菜单效果
- // $('#content').bind("click",function(event){
+ // 左侧菜单项点击事件
$('.left-nav #nav li').click(function (event) {
-
- if($(this).children('.sub-menu').length){
- if($(this).hasClass('open')){
+ 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).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');
+ $(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));
-
- for (var i = 0; i <$('.x-iframe').length; i++) {
- if($('.x-iframe').eq(i).attr('tab-id')==index+1){
- tab.tabChange(index+1);
+ } 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.tabAdd(title,url,index+1);
- tab.tabChange(index+1);
+
+ // 否则新建Tab项并切换
+ tab.tabAdd(title, url, index + 1);
+ tab.tabChange(index + 1);
}
-
- event.stopPropagation();
-
- })
-
-})
+
+ event.stopPropagation(); // 阻止事件冒泡
+ });
+
+});
+
var cateIds = [];
+
+// 获取指定栏目ID下的所有子栏目ID
function getCateId(cateId) {
-
- $("tbody tr[fid="+cateId+"]").each(function(index, el) {
- id = $(el).attr('cate-id');
- cateIds.push(id);
- getCateId(id);
+ $("tbody tr[fid=" + cateId + "]").each(function (index, el) {
+ id = $(el).attr('cate-id'); // 获取子栏目ID
+ cateIds.push(id); // 将子栏目ID加入数组
+ getCateId(id); // 递归获取更深层次的子栏目ID
});
}
-/*弹出层*/
+/* 弹出层相关函数 */
+
/*
- 参数解释:
- title 标题
- url 请求的url
- id 需要操作的数据id
+ 弹出层函数,显示一个iframe窗口
+ title 弹出层的标题
+ url 请求的URL地址
+ id 数据ID
w 弹出层宽度(缺省调默认值)
h 弹出层高度(缺省调默认值)
*/
-function x_admin_show(title,url,w,h){
+function x_admin_show(title, url, w, h) {
if (title == null || title == '') {
- title=false;
+ title = false; // 默认无标题
};
if (url == null || url == '') {
- url="404.html";
+ url = "404.html"; // 默认URL为404页面
};
if (w == null || w == '') {
- w=($(window).width()*0.9);
+ w = ($(window).width() * 0.9); // 默认宽度为窗口宽度的90%
};
if (h == null || h == '') {
- h=($(window).height() - 50);
+ h = ($(window).height() - 50); // 默认高度为窗口高度减去50
};
+ // 打开弹出层
layer.open({
- type: 2,
- area: [w+'px', h +'px'],
- fix: false, //不固定
- maxmin: true,
- shadeClose: true,
- shade:0.4,
- title: title,
- content: url
+ 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);
- parent.layer.close(index);
+/* 关闭弹出框 */
+function x_admin_close() {
+ var index = parent.layer.getFrameIndex(window.name); // 获取iframe的索引
+ parent.layer.close(index); // 关闭弹出框
}
-
-
diff --git a/web/js/xcity.js b/web/js/xcity.js
index e1fb2cf..a2ce485 100644
--- a/web/js/xcity.js
+++ b/web/js/xcity.js
@@ -1,92 +1,101 @@
-$.fn.xcity = function(pName,cName,aName){
-
- var p = $(this).find('select[lay-filter=province]');
-
- var c = $(this).find('select[lay-filter=city]');
-
- var a = $(this).find('select[lay-filter=area]');
+$.fn.xcity = function(pName, cName, aName){
+ // 获取当前元素下的省、市、区选择框
+ var p = $(this).find('select[lay-filter=province]'); // 省选择框
+ var c = $(this).find('select[lay-filter=city]'); // 市选择框
+ var a = $(this).find('select[lay-filter=area]'); // 区选择框
+ // 初始化市和区列表为空
var cityList = [];
-
var areaList = [];
- showP(provinceList);
-
- showC(cityList);
-
- showA(areaList);
+ // 渲染省、市、区下拉框内容
+ showP(provinceList); // 渲染省份列表
+ showC(cityList); // 渲染城市列表
+ showA(areaList); // 渲染区域列表
+ // 显示省列表
function showP(provinceList) {
- p.html('');
+ p.html(''); // 清空省选择框内容
- is_pName = false;
+ is_pName = false; // 标记是否找到了匹配的省名称
+ // 遍历省份列表
for (var i in provinceList) {
-
- if(pName==provinceList[i].name){
+ // 如果当前省名称匹配给定的pName,则选中该省
+ if(pName == provinceList[i].name){
is_pName = true;
- cityList = provinceList[i].cityList;
- p.append("")
- }else{
- p.append("")
+ cityList = provinceList[i].cityList; // 设置该省对应的城市列表
+ p.append(""); // 添加选中的省份项
+ } else {
+ p.append(""); // 添加未选中的省份项
}
}
+
+ // 如果没有找到匹配的省名称,则默认选择第一个省份
if(!is_pName){
- cityList = provinceList[0].cityList;
+ cityList = provinceList[0].cityList; // 默认选择第一个省的城市列表
}
-
}
+ // 显示市列表
function showC(cityList) {
+ c.html(''); // 清空市选择框内容
- c.html('');
-
- is_cName = false;
+ is_cName = false; // 标记是否找到了匹配的市名称
+ // 遍历城市列表
for (var i in cityList) {
- if(cName==cityList[i].name){
+ // 如果当前市名称匹配给定的cName,则选中该市
+ if(cName == cityList[i].name){
is_cName = true;
- areaList = cityList[i].areaList;
- c.append("")
- }else{
- c.append("")
+ areaList = cityList[i].areaList; // 设置该市对应的区列表
+ c.append(""); // 添加选中的市项
+ } else {
+ c.append(""); // 添加未选中的市项
}
}
+ // 如果没有找到匹配的市名称,则默认选择第一个市的区列表
if(!is_cName){
- areaList = cityList[0].areaList;
+ areaList = cityList[0].areaList; // 默认选择第一个市的区列表
}
}
+ // 显示区列表
function showA(areaList) {
- a.html('');
+ a.html(''); // 清空区选择框内容
+ // 遍历区列表并渲染
for (var i in areaList) {
-
- if(aName==areaList[i]){
- a.append("")
- }else{
- a.append("")
+ // 如果当前区名称匹配给定的aName,则选中该区
+ if(aName == areaList[i]){
+ a.append(""); // 添加选中的区项
+ } else {
+ a.append(""); // 添加未选中的区项
}
}
}
+ // 渲染选择框,应用layui样式
form.render('select');
+ // 绑定省选择框的变更事件
form.on('select(province)', function(data){
- pName = data.value;
- showP(provinceList);
+ pName = data.value; // 更新pName为当前选中的省名称
+ showP(provinceList); // 重新渲染省、市、区选择框
showC(cityList);
showA(areaList);
- form.render('select');
+ form.render('select'); // 渲染更新后的选择框
});
+ // 绑定市选择框的变更事件
form.on('select(city)', function(data){
- cName = data.value;
- showC(cityList);
+ cName = data.value; // 更新cName为当前选中的市名称
+ showC(cityList); // 重新渲染市、区选择框
showA(areaList);
- form.render('select');
+ form.render('select'); // 渲染更新后的选择框
});
+}