FOF lay表格功能类

admin

重载表格   

   定义函数 重载门店信息() {
                局部变量 查询参数 = "/定时任务查询?搜索词=" + $("#搜索词").设置或获取值();
                lay_表格.重载("任务表格", {
                    [lay_表格.配置.地址]: 查询参数,
                    [lay_表格.配置.分页]: {
                        [lay_分页.配置.起始页]: 1 // 重置为第一页
                    },
                    [lay_表格.配置.完成]: 定义函数 (res, curr, count) {
                        绑定表格右键菜单(res["数据"]);
                    }
                });
  }


表格行被点击

    lay_表格.行点击("任务表格", 定义函数 (当前行) {
                修改表格行颜色(当前行);
            });
            $(Dom文档).绑定事件("@事件_打开上下文菜单", 定义函数 (e) {
                常量 当前行DOM = $(event.target).closest("tr");
                常量 行数据 = lay_表格.获取数据("任务表格"); // 获取全部表格数据
                常量 索引 = 当前行DOM.attr("data-row-index");
                // 高亮当前行
                修改表格行颜色({ tr: [当前行DOM[0]] });
                e.preventDefault();
                返回 假;
            });



创建表格

       常量 门店表格对象 = 新建对象 lay_表格({
                [lay_表格.配置.绑定元素]: "#任务表格",
                [lay_表格.配置.地址]: "/定时任务查询",
                [lay_表格.配置.id]: "任务表格",
                [lay_表格.配置.高度]: "-80", // 调整高度，确保分页不被遮挡（full表示填满父容器，减去150px留空间）

                [lay_表格.配置.工具栏]: `<区块 类名="lay-表格-工具栏-自定义">
                                         <区块 类名="lay-内联元素" lay-事件="添加任务"><斜体文本 类名="lay-图标 lay-图标添加1"></斜体文本></区块>
                                         <区块 类名="lay-内联元素" lay-事件="刷新"><斜体文本 类名="lay-图标 lay-图标刷新"></斜体文本></区块>
                                          </区块>`,
                [lay_表格.配置.分页]: {
                    [lay_分页.配置.起始页]: 1, // 当前页
                    [lay_分页.配置.条数]: 100, // 每页条数
                    [lay_分页.配置.条数选择]: [100, 200, 500], // 条数选择器
                    [lay_分页.配置.布局]: ["prev", "page", "next", "count", "limit", "skip"], // 分页布局（确保显示必要元素）
                    [lay_分页.配置.分组]: 5 // 连续显示的页码数
                },
                [lay_表格.配置.加载条]: 真,
                // 表格列配置
                [lay_表格.配置.表头]: [
                    [
                        {
                            [lay_表格.表头配置.字段]: "ID",
                            [lay_表格.表头配置.标题]: "ID",
                            [lay_表格.表头配置.宽度]: 30
                        },
                        {
                            [lay_表格.表头配置.字段]: "TaskName",
                            [lay_表格.表头配置.标题]: "任务名称",
                            [lay_表格.表头配置.宽度]: 170,
                            [lay_表格.表头配置.模板]: 定义函数 (数据) {
                                // 第一个条件：is_Sys 为 "1" 时绿色
                                如果 (数据["Type"] == "1") {
                                    返回 `<标题1 行内样式="颜色: 颜色值-绿色; 字体-大小: 14px;">${数据["TaskName"]}</标题1>`;
                                }
                                // 第二个条件：is_Sys 为 "2" 时橙色
                                否则 如果 (数据["Type"] == "2") {
                                    返回 `<标题1 行内样式="颜色: 颜色值-红色; 字体-大小: 14px;">${数据["TaskName"]}</标题1>`;
                                }
                                // 第三个条件：例如 is_Sys 为 "3" 时红色
                                否则 如果 (数据["Type"] == "3") {
                                    返回 `<标题1 行内样式="颜色: 颜色值-灰色 ; 字体-大小: 14px;">${数据["TaskName"]}</标题1>`;
                                }
                                // 第四个条件：例如 is_Sys 为 "4" 时蓝色
                                否则 如果 (数据["Type"] == "4") {
                                    返回 `<标题1 行内样式="颜色: 颜色值-蓝色; 字体-大小: 14px;">${数据["TaskName"]}</标题1>`;
                                } 否则 如果 (数据["Type"] == "5") {
                                    返回 `<标题1 行内样式="颜色: 颜色值-紫色; 字体-大小: 14px;">${数据["TaskName"]}</标题1>`;
                                }
                                // 所有条件都不匹配时的默认情况（黑色）
                                否则 {
                                    返回 `<标题1 行内样式="颜色: 颜色值-黑色; 字体-大小: 14px;">${数据["TaskName"]}</标题1>`;
                                }
                            }
                        },
                        {
                            [lay_表格.表头配置.字段]: "StartTime",
                            [lay_表格.表头配置.标题]: "开始时间",
                            [lay_表格.表头配置.宽度]: 170
                        },
                        {
                            [lay_表格.表头配置.字段]: "EndTime",
                            [lay_表格.表头配置.标题]: "结束时间",
                            [lay_表格.表头配置.宽度]: 170
                        },
                        {
                            [lay_表格.表头配置.标题]: "工具栏",
                            [lay_表格.表头配置.功能条]: "#行工具栏",
                            [lay_表格.表头配置.宽度]: 250
                        }
                    ]
                ],
                // 表格加载完成回调
                [lay_表格.配置.完成]: 定义函数 (res, curr, count) {
                    绑定表格右键菜单(res["数据"]);
                }
            });

绑定表格右键菜单

          定义函数 绑定表格右键菜单(表格数据) {
                新建对象 lay_下拉菜单({
                    [lay_下拉菜单.配置.绑定元素]: "#任务表格 ~ .layui-table-view .layui-table-main tr",
                    [lay_下拉菜单.配置.触发]: "@事件_打开上下文菜单",
                    [lay_下拉菜单.配置.是否展开菜单]: 真,
                    [lay_下拉菜单.配置.点击]: 定义函数 (data, othis) {
                        常量 序号 = $(本对象.elem).属性值("data-index");
                        常量 选中行 = 表格数据.查询((表格行) => 表格行["LAY_INDEX"] == 序号);
                        常量 索引 = data["id"];
                        浏览器临时储存.保存数据("修改任务内容", "");
                        分支判断 (索引) {
                            分支 100:
                                添加任务();

                                跳出循环;
                            分支 101:
                                编辑任务(JSON类.到可读JSON文本(选中行, 4));

                                跳出循环;
                            分支 102:
                                删除任务();
                                跳出循环;
                            定义默认:
                                信息框("其他值，执行默认操作");
                        }

                        调试输出(data);
                    },

                    // 右键菜单数据配置（包含子菜单）
                    [lay_下拉菜单.配置.数据]: [
                        {
                            [lay_下拉菜单.菜单.id]: 1,
                            [lay_下拉菜单.菜单.标题]: "功能列表",
                            [lay_下拉菜单.菜单.类型]: lay_下拉菜单.类型.默认,
                            [lay_下拉菜单.菜单.子菜单]: [
                                {
                                    [lay_下拉菜单.菜单.id]: 100,
                                    [lay_下拉菜单.菜单.标题]: "新增"
                                },
                                {
                                    [lay_下拉菜单.菜单.id]: 101,
                                    [lay_下拉菜单.菜单.标题]: "编辑"
                                },
                                {
                                    [lay_下拉菜单.菜单.id]: 102,
                                    [lay_下拉菜单.菜单.标题]: "删除"
                                }
                            ]
                        }
                    ]
                });
            }


绑定表格工具栏事件

    lay_表格.工具栏事件("任务表格", 定义函数 (工具事件对象) {
                变量 事件 = 工具事件对象.事件;
                如果 (事件 === "添加任务") {
                    添加任务();
                } 否则 如果 (事件 === "刷新") {
                    重载门店信息();
                }
            });
绑定表格行工具事件

            lay_表格.工具事件("任务表格", 定义函数 (工具事件对象, 点击元素) {
                变量 数据 = 工具事件对象.数据; // 当前行数据
                变量 事件 = 工具事件对象.事件; // 事件名
                变量 当前行 = 工具事件对象.表格行; // 当前行DOM元素

                如果 (事件 === "编辑任务") {
                    编辑任务(JSON类.到可读JSON文本(数据, 4));
                } 否则 如果 (事件 === "删除任务") {
                    删除任务(数据);
                }
            });

添加表格行元素
<区块 id="行工具栏" 行内样式="显示模式: 无效">
                    <超链接 类名="lay-按钮 lay-按钮-原始 lay-按钮-迷你" lay-事件="编辑任务"> <行内元素 类名="lay-图标 lay-图标编辑"></行内元素>编辑任务 </超链接>
                    <超链接 类名="lay-按钮 lay-按钮-警告 lay-按钮-迷你" lay-事件="删除任务"> <斜体文本 类名="lay-图标 lay-图标删除"></斜体文本> 删除任务 </超链接>
  </区块>



定义函数 修改表格行颜色(当前行) {
    调试输出("当前行元素：", 当前行["tr"][0]);
    $("表格行").设置或返回样式({ "background-color": "white" });
    $(当前行["tr"][0]).设置或返回样式({ "background-color": "#FFF7E6" }); //FFF7E6 谈橙色  #F0FFF4 浅绿
}

获取表格所有显示内容

调试输出(lay_表格.获取数据("用户表格"));

获取复选框所有选中内容

调试输出(lay_表格.选中行("用户表格"))



开启复选框 配置表格头中加入

  {
                            [lay_表格.表头配置.类型]: lay_表格.类型.复选框
  },