Foxnic-Web 代码生成 (8) —— 配置列表页
概述
列表页面次要蕴含了顶部的搜寻区域和表格区域，搜寻区域有点相似表单，配置上可能存在相似之处。本篇咱们就来理解一下，在代码生成时的列表页出现方面，咱们能够做点啥。
本文中的示例代码均可在 https://gitee.com/LeeFJ/foxni... 我的项目中找到，本文对照 webfull 我的项目解说。
残缺示例
Foxnic-Web 我的项目提供代码生成的残缺示例，请大家参考：
https://gitee.com/LeeFJ/foxni...
配置列表依赖文件
数据表格以及列表页通过 ListOptions 配置。
@Overridepublic 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 | 显示的搜寻行数 |
示例代码如下：
@Overridepublic 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);}小结
本节主介绍了列表页以、数据表格、搜寻区域的配置项。通过这些配置，可能使开发人员在代码生成阶段细化页面的性能实现。
相干我的项目
https://gitee.com/LeeFJ/foxnic
https://gitee.com/LeeFJ/foxni...
https://gitee.com/lank/eam
https://gitee.com/LeeFJ/foxni...
官网文档
http://foxnicweb.com/docs/doc...