FOF基础查询框架

admin

<!文档类型 网页类型>
<网页 语言代码="中文">
    <网页头部>
        <网页信息 文档编码="UTF8" />
        <网页信息 名称="页面视图" 关联数据="视图宽度=填充视图宽度,初始缩放值=1,最大缩放值=1,用户缩放状态=假" />
        <网页信息 关联HTTP="兼容模式" 关联数据="最高IE版本" />
        <网页标题>门店管理</网页标题>
        <!-- 引入Layui内置资源（根据实际环境调整路径） -->
    </网页头部>
    <网页主体>
        <区块 类名="lay-卡片面板">
            <区块 类名="lay-卡片面板-主体 表格盒子">
                <!-- 搜索工具栏（固定不刷新） -->
                <区块 类名="lay-表单" lay-过滤器="searchForm">
                    <区块 类名="lay-输入框-内联块">
                        <数据框 id="keyword" 数据类型="文本输入" 属性名称="keyword" 默认提示="店号或店名搜索" 自动填充="不记住" 类名="lay-输入框" />
                    </区块>

                    <区块 类名="lay-输入框-内联块">
                        <下拉列表 id="Province" 属性名称="Province" 类名="lay-选择器">
                            <列表选项 列表值="安徽省">安徽省</列表选项>
                            <列表选项 列表值="福建省">福建省</列表选项>
                            <列表选项 列表值="江苏省">江苏省</列表选项>
                        </下拉列表>
                    </区块>
                    <按钮 类名="lay-按钮" id="searchBtn" lay-提交 lay-过滤器="searchBtn">搜索</按钮>
                </区块>

                <!-- 表格容器（仅此处刷新） -->
                <区块 行内样式="溢出-x轴: 自动">
                    <表格 类名="lay-表格" id="storeTable" lay-过滤器="storeTable"></表格>
                </区块>

                <!-- 行工具栏模板 -->
                <脚本 因特网标准="text/网页标准" id="rowToolbar">
                    <超链接 类名="lay-按钮 lay-按钮-迷你 lay-按钮-百搭" lay-事件="edit">编辑</超链接>
                    <超链接 类名="lay-按钮 lay-按钮-警告 lay-按钮-迷你" lay-事件="del">删除</超链接>
                </脚本>
            </区块>
        </区块>
        <样式>
            .lay-表格-单元格 {
                空格: 不换行; /* 禁止内容换行 */
                高度: 36px; /* 固定行高 */
                行高: 36px; /* 调整行高 */
                内边距: 0 15px; /* 调整内边距 */
            }
            /* 允许表格容器横向滚动 */
            .表格盒子 {
                溢出-x轴: 自动;
            }
        </样式>
        <脚本>
            //删除
            //修改  修改

            // 初始化表格
            局部变量 表格对象 = 新建对象 lay_表格({
                [lay_表格.配置.绑定元素]: "#storeTable",
                [lay_表格.配置.地址]: "/CheckStoreInformation?keyword=&Province=",
                [lay_表格.配置.id]: "storeTable",
                [lay_表格.配置.高度]: -80,
                [lay_表格.配置.工具栏]: "#左侧工具栏",
                //   [lay_表格.配置.默认工具栏]: [lay_表格.默认工具栏.打印, lay_表格.默认工具栏.导出],
                [lay_表格.配置.分页]: 真,
                [lay_表格.配置.条数选择]: [100, 200, 500],
                [lay_表格.配置.条数]: 5,
                [lay_表格.配置.加载条]: 真,

                [lay_表格.配置.分页]: {
                    [lay_分页.配置.起始页]: 1
                },
                [lay_表格.配置.表头]: [
                    [
                        {
                            [lay_表格.表头配置.字段]: "ID",
                            [lay_表格.表头配置.标题]: "ID",
                            [lay_表格.表头配置.最小宽度]: 60 // ID列单独设置最小宽度
                        },
                        {
                            [lay_表格.表头配置.字段]: "StoreCode",
                            [lay_表格.表头配置.标题]: "店号",
                            [lay_表格.表头配置.最小宽度]: 110
                        },
                        {
                            [lay_表格.表头配置.字段]: "StoreName",
                            [lay_表格.表头配置.标题]: "店名",
                            [lay_表格.表头配置.最小宽度]: 200
                        },
                        {
                            [lay_表格.表头配置.字段]: "MachineCount",
                            [lay_表格.表头配置.标题]: "设备数量",
                            [lay_表格.表头配置.最小宽度]: 90
                        },
                        {
                            [lay_表格.表头配置.字段]: "Province",
                            [lay_表格.表头配置.标题]: "省份",
                            [lay_表格.表头配置.最小宽度]: 90
                        },
                        {
                            [lay_表格.表头配置.字段]: "City",
                            [lay_表格.表头配置.标题]: "城市",
                            [lay_表格.表头配置.最小宽度]: 85
                        },
                        {
                            [lay_表格.表头配置.字段]: "District",
                            [lay_表格.表头配置.标题]: "区域",
                            [lay_表格.表头配置.最小宽度]: 130
                        },
                        {
                            [lay_表格.表头配置.字段]: "CreateTime",
                            [lay_表格.表头配置.标题]: "创建时间",
                            [lay_表格.表头配置.最小宽度]: 160 // 时间列单独设置最小宽度
                        },
                        {
                            [lay_表格.表头配置.字段]: "LastUpdateTime",
                            [lay_表格.表头配置.标题]: "修改时间",
                            [lay_表格.表头配置.最小宽度]: 160 // 时间列单独设置最小宽度
                        },
                        {
                            [lay_表格.表头配置.字段]: "Remark",
                            [lay_表格.表头配置.标题]: "备注"
                        },
                        {
                            [lay_表格.表头配置.标题]: "工具栏",
                            [lay_表格.表头配置.功能条]: "#工具栏演示"
                        }
                    ]
                ],
                [lay_表格.配置.完成]: 定义函数 (res, curr, count) {
                    局部变量 表格数据 = res["数据"];
                    新建对象 lay_下拉菜单({
                        [lay_下拉菜单.配置.绑定元素]: "#storeTable ~ .layui-table-view .layui-table-main tr",
                        [lay_下拉菜单.配置.触发]: "@事件_打开上下文菜单",
                        [lay_下拉菜单.配置.是否展开菜单]: 真,

                        [lay_下拉菜单.配置.点击]: 定义函数 (data, othis) {
                            局部变量 序号 = $(本对象.elem).属性值("data-index");
                            局部变量 选中行 = 表格数据.查询((表格行) => 表格行["LAY_INDEX"] == 序号);
                            lay_弹出层.消息框(JSON类.到可读JSON文本(选中行, 4));
                            局部变量 索引 = data["id"];
                            分支判断 (索引) {
                                分支 100:
                                    信息框("变量是100，执行操作A");
                                    跳出循环;
                                分支 101:
                                    信息框("变量是101，执行操作B");
                                    跳出循环;
                                定义默认:
                                    信息框("其他值，执行默认操作");
                            }

                            调试输出(data);
                        },
                        [lay_下拉菜单.配置.数据]: [
                            {
                                [lay_下拉菜单.菜单.id]: 1,
                                [lay_下拉菜单.菜单.标题]: "功能列表",
                                [lay_下拉菜单.菜单.类型]: lay_下拉菜单.类型.默认,
                                [lay_下拉菜单.菜单.子菜单]: [
                                    {
                                        [lay_下拉菜单.菜单.id]: 100,
                                        [lay_下拉菜单.菜单.标题]: "搜索"
                                    },
                                    {
                                        [lay_下拉菜单.菜单.id]: 101,
                                        [lay_下拉菜单.菜单.标题]: "查询"
                                    }
                                ]
                            }
                        ]
                    });
                }
            });
            $(Dom文档).绑定事件("@事件_打开上下文菜单", 定义函数 (JQ事件对象) {
                // 弹出右键菜单的逻辑
                JQ事件对象.阻止运行默认操作();
                返回 假;
            });
            // 绑定搜索按钮事件，阻止默认行为并重载表格
            $("#searchBtn").点击元素(定义函数 () {
                // 在这里编写点击事件触发后的逻辑
                重载门店信息();
            });

            // 额外添加回车键触发搜索的功能，提升用户体验
            $("#keyword, #Province").绑定事件("keypress", 定义函数 (e) {
                如果 (e.keyCode === 13) {
                    // 回车键
                    e.preventDefault();
                    重载门店信息();
                }
            });

            定义函数 重载门店信息() {
                变量 keyword = $("#keyword").设置或获取值();
                变量 Province = $("#Province").设置或获取值();
                变量 查询参数 = `/CheckStoreInformation?keyword=${keyword}&Province=${Province}`;

                lay_表格.重载("storeTable", {
                    [lay_表格.配置.地址]: 查询参数,
                    [lay_表格.配置.分页]: {
                        [lay_分页.配置.起始页]: 1 // 重置为第一页
                    },
                    [lay_表格.配置.完成]: 定义函数 (res, curr, count) {}
                });
            }
        </脚本>
    </网页主体>
</网页>