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

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 配置。

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

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

配置列表页外观功能参数

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

配置表格外观功能参数

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

配置扩展按钮

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

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

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

配置表格的列布局

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

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

配置搜索区域外观与布局

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

示例代码如下：

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

小结

  本节主介绍了列表页以、数据表格、搜索区域的配置项。通过这些配置，能够使开发人员在代码生成阶段细化页面的功能实现。

相关项目

  https://gitee.com/LeeFJ/foxnic

  https://gitee.com/LeeFJ/foxnic-web

  https://gitee.com/lank/eam

  https://gitee.com/LeeFJ/foxnic-samples

官方文档

  http://foxnicweb.com/docs/doc.html