关于低代码:FoxnicWeb-代码生成-8-配置列表页

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

概述

  列表页面次要蕴含了顶部的搜寻区域和表格区域，搜寻区域有点相似表单，配置上可能存在相似之处。本篇咱们就来理解一下，在代码生成时的列表页出现方面，咱们能够做点啥。

  本文中的示例代码均可在 https://gitee.com/LeeFJ/foxni… 我的项目中找到，本文对照 webfull 我的项目解说。

残缺示例

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

https://gitee.com/LeeFJ/foxni…

配置列表依赖文件

  数据表格以及列表页通过 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 文件，以及变量等，配置项如下：

配置列表页外观性能参数

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

配置表格外观性能参数

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

配置扩大按钮

  为了便于性能扩大，在生成表格页面时能够额定减少扩大按钮或笼罩已有按钮的配置，这些按钮包含表格上方的工具栏按钮和表格右侧的操作列按钮等。

  与工具栏按钮管制相干的配置我的项目有：

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

配置表格的列布局

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

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

配置搜寻区域外观与布局

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

示例代码如下：

@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/foxni…

  https://gitee.com/lank/eam

  https://gitee.com/LeeFJ/foxni…

官网文档

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