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

LeeFJ
• 阅读 414
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);
}
小结

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

相关项目

  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

点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
AWS国庆双重礼,仅限7天
自2021年10月1日00:00起至2021年10月7日24:00,新注册并激活(需全部完成账号注册的五个步骤,否则账号状态并未激活)AWS海外区域账户,填写页面下方表单,即可申领价值$200美元的AWS海外区域账户服务抵扣券直充到您的账户,用以抵扣服务消费,助您轻松体验多个云迁移应用场景。同时,您还可获赠AWS精美祥云纪念T恤一件。,仅限7天$20
AWS国庆双重礼,仅限7天
自2021年10月1日00:00起至2021年10月7日24:00,新注册并激活(需全部完成账号注册的五个步骤,否则账号状态并未激活)AWS海外区域账户,填写页面下方表单,即可申领价值$200美元的AWS海外区域账户服务抵扣券直充到您的账户,用以抵扣服务消费,助您轻松体验多个云迁移应用场景。同时,您还可获赠AWS精美祥云纪念T恤一件。,仅限7天$20
Wesley13 Wesley13
2年前
FLV文件格式
1.        FLV文件对齐方式FLV文件以大端对齐方式存放多字节整型。如存放数字无符号16位的数字300(0x012C),那么在FLV文件中存放的顺序是:|0x01|0x2C|。如果是无符号32位数字300(0x0000012C),那么在FLV文件中的存放顺序是:|0x00|0x00|0x00|0x01|0x2C。2.  
Wesley13 Wesley13
2年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Wesley13 Wesley13
2年前
PHP创建多级树型结构
<!lang:php<?php$areaarray(array('id'1,'pid'0,'name''中国'),array('id'5,'pid'0,'name''美国'),array('id'2,'pid'1,'name''吉林'),array('id'4,'pid'2,'n
Wesley13 Wesley13
2年前
Java日期时间API系列36
  十二时辰,古代劳动人民把一昼夜划分成十二个时段,每一个时段叫一个时辰。二十四小时和十二时辰对照表:时辰时间24时制子时深夜11:00凌晨01:0023:0001:00丑时上午01:00上午03:0001:0003:00寅时上午03:00上午0
Stella981 Stella981
2年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
2年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_