Foxnic-Web 代码生成 (8) —— 配置列表页

概述

列表页面主要包含了顶部的搜索区域和表格区域，搜索区域有点类似表单，配置上可能存在相似之处。本篇我们就来了解一下，在代码生成时的列表页呈现方面，我们可以做点啥。

本文中的示例代码均可在 https://gitee.com/LeeFJ/foxnic-samples 项目中找到，本文对照 webfull 项目讲解。

完整示例

Foxnic-Web 项目提供代码生成的完整示例，请大家参考：

https://gitee.com/LeeFJ/foxnic-web/blob/1.7.0.RELEASE/common/generator/src/main/java/org/github/foxnic/web/generator/module/example/CodeExampleConfig.java

######

配置列表依赖文件

数据表格以及列表页通过 ListOptions 配置。

@Override
public void configList(ViewOptions view,ListOptions list) {
    //增加一个变量
    list.addJsVariable("TEST_LIST","[[${enum.toArray('org.github.foxnic.web.language.Language')}]]","列表测试变量");
    //设置操作列宽度
    list.operationColumn().width(280);
    //增加操作列按钮
    list.operationColumn().addActionButton("测试","doTestAction","layui-btn-primary layui-border-red");
}

在代码生成时，列表页可以额外包含其它的 js 和 css 文件，以及变量等，配置项如下：

配置项	说明
addCss	添加 css 文件引入
addJs	添加 js 文件引入。
addJsVariable	添加 js 变量；这是表单的服务端模版变量。

配置列表页外观功能参数

列表页的外观与功能参数如下：

配置项	说明
disableCreateNew	禁止新建。
disableModify	禁止修改。
disableSingleDelete	禁止单个删除。
disableBatchDelete	禁止批量删除。
disableFormView	禁止查看表单
disableSpaceColumn	禁止空白列
disableMargin	关闭页边距
pageTitle	设置页面标题

配置表格外观功能参数

数据表格外观与功能参数如下：

配置项	说明
disableSpaceColumn	禁止空白列
mulitiSelect	设置列数据行单选或多选
refreshAfterEdit	是否在编辑窗口保存、关闭后，刷新整个表格数据，如果 true 刷新所有行，如果 false ，刷新当前编辑的行
excel	Excel 导入导出配置
sort	指定默认排序

配置扩展按钮

为了便于功能扩展，在生成表格页面时可以额外增加扩展按钮或覆盖已有按钮的配置，这些按钮包括表格上方的工具栏按钮和表格右侧的操作列按钮等。

与工具栏按钮控制相关的配置项目有：

配置项	说明
configCreateNewButton	配置新建按钮，如果不改变默认值，则传入 null 即可
configBatchDeleteButton	配置批量删除按钮，如果不改变默认值，则传入 null 即可
addToolButton	为列表增加工具栏按钮

与表格右侧的操作列相关的配置项目在 ListOptions.operationColumn() 中配置，配置项目包括：

配置项	说明
width	设置操作列的宽度，默认值 160，参考值：两个按钮 125，三个按钮 160
addActionButton	为列表的操作列增加一个按钮
addActionMenu	为列表的操作列增加一个更多菜单
configFormViewButton	配置查看按钮
configModifyButton	配置修改按钮
configDeleteButton	配置删除按钮

配置表格的列布局

表格列的布局主要是指表格列的顺序，通过 ListOptions.columnLayout() 设置默认的列顺序。但事实上，Foxnic-Web 已经强化了 Table 组件，用户可自行调整表格的列顺序、宽度甚至是抬头。这些通常由开发人员或实施人员在第一次使用时调整好，其它账户会自动参考已调整好的表格配置。

目前 Foxnic-Web 的 Table 组件在代码生成层面不支持多行表头，若要使用多行表头，请自行实现。

配置搜索区域外观与布局

代码生成时可通过 SearchAreaOptions 设置列表的搜索区域进行外观与布局等方面的配置，配置项如下：

配置项	说明
disable	禁用搜索区域
inputLayout	设置行布局
inputWidth	设置默认输入框宽度
labelWidth	按栏次设置标签宽度
rowsDisplay	显示的搜索行数

示例代码如下：

@Override
public void configSearch(ViewOptions view,SearchAreaOptions search) {
    //此设置用于覆盖字段的独立配置；清单中没有出现的，设置为隐藏；重复出现或不存在的字段将抛出异常；只接受 DBField 或 String 类型的元素
    search.inputLayout(
        new Object[]{CodeExampleMeta.ROLE_IDS,TABLE.NAME,TABLE.NOTES,TABLE.AREA},
        new Object[]{TABLE.CHECK_DICT,TABLE.WEIGHT,TABLE.VALID,TABLE.RESOURCE_ID},
        new Object[]{TABLE.RADIO_ENUM,TABLE.RADIO_DICT,TABLE.CHECK_ENUM,TABLE.SELECT_DICT},
        new Object[]{TABLE.BIRTHDAY,TABLE.SELECT_ENUM}
    );
    //搜索框显示的行数,默认2
    search.rowsDisplay(3);
    //设置各个列的搜索输入框的标签宽度
    search.labelWidth(1,50);
    search.labelWidth(2,80);
    search.labelWidth(3,100);
    search.labelWidth(4,100);
    //设置列的搜索输入框的宽度
    search.inputWidth(4,150);
    //对某些未对其的进行微调
    view.field(TABLE.BIRTHDAY).search().inputWidth(180);
    view.field(TABLE.SELECT_ENUM).search().labelWidth(100);
    view.field(TABLE.AREA).search().inputWidth(67);
}