Jiess文档

Appearance

高级列表 ​

本节介绍Jiess基础库中的两个列表组件：JiessTable和SuperTable

准备工作 ​

首先需要将 JiessTable 和 SuperTable 注册为Jiess全局组件

js
// jiessConfig/index.js

import { $component } from '@jiess/plus';
import { $SuperTable, $JiessTable } from '@/.jiess';
$component($JiessTable.name, $JiessTable);
$component($SuperTable.name, $SuperTable);

参考自定义注册

JiessTable ​

JiessTable组件分别基于element-ui，element-plus和ant-design中的table组件封装

构建列表 ​

对JiessTable组件提供表头配置函数（对象）items，可渲染列表表头； 若提供列表数据datas（该属性可选），即可渲染完整列表；此外，JiessTable还有以下特点：

midder对象 ​

每个JiessTable都会构建独有的中介者（midder对象）， 可将列表表体，分页区，筛选区，串联起来；承担表内数据通信和事件交互的功能

表内生命周期 ​

创新性的将生命周期融入到了列表渲染中，以方便各阶段的事务处理

  • create：初始创建阶段，可进行数据初始化，准备数据
  • mounte：列表渲染完毕的回调，可进行表体数据的加载
  • render：列表的渲染过程，在此对表体，筛选区，分页区进行布局和整体把控
  • update：列表需要更新时的回调，控制表体数据的加载过程

形参 midder

生命周期均需要提供一个函数，在这里需要特别说明的是：对于上述生命周期函数， 它们的第一个形参，均为midder对象，实现了将整个列表串联

列表数据响应式 ​

在JiessTable的midder对象中，会注入proxy属性，它是Jiess响应式对象， 使用proxy便可以更新对应的表体数据，分页数据，控制三块区域的渲染和数据提取

  • proxy.datas：列表表体数据
  • proxy.columns：列表表头数据
  • proxy.currentPage：当前分页页码
  • proxy.pageSize：每页展示数据的条数
  • proxy.total：分页中展示列表的总条数
  • proxy.pageSizes：size切换器的选项

element中：

  • proxy.layout：布局控制

antd中：

  • proxy.showSizeChanger：是否显示size切换器
  • proxy.showQuickJumper：分页布局控制

快速上手 ​

下面介绍JiessTable组件的快速上手使用

使用JiessTable组件 ​

注：Jiess全局组件，仅能在Jiess环境中使用

js
// setup函数中（jiess环境下）
import items from './items.js';
function setup() {
	this.add(
		this.render({
			//直接使用全局注册的组件名即可
			is: 'JiessTable',
			items: items,
			render(midder,{ table, pager }) {
				// 此处自定义布局控制
				this.add(table, pager);
			}
		})
	)
}

注：render和items为必要参数

上例中JiessTable已全局注册，所以is使用字符串即可

JiessTable组件配置属性 ​

以下是JiessTable组件中通常用到的属性

items ​

  • 类型 Function|Array
  • 参数 (midder ,itemsParam)
  • 必要 true
  • 返回
  • 详细

用于列表表头的配置，掌控列表整体的渲染

js
// items为数组
const items = [
	{ prop: 'name', label: '姓名' },
	{ prop: 'gender', label: '性别' },
	{ prop: 'age', label: '年龄' }
];

// items为function
const items = function(midder){
	return [
		{ prop: 'name', label: '姓名' },
		{ prop: 'gender', label: '性别' },
		{ prop: 'age', label: '年龄' }
	]
}

datas ​

  • 类型 Array
  • 必要 false
  • 返回
  • 详细

初始化列表表体的数据

js
const datas = [
	{ key: 'id_1', name: '小明', gender: '男', age: 16 },
	{ key: 'id_2', name: '小强', gender: '男', age: 18 },
	{ key: 'id_3', name: '小红', gender: '女', age: 17 }
];

create ​

  • 类型 Function
  • 参数 (midder)
  • 必要 true
  • 返回
  • 详细

在列表构建构建好midder实例并做好对初始数据的解析以后调用

js
create(midder) {
	// 用于对midder注入初始数据，如 列表http请求注入静态数据
}

render ​

  • 类型 Function
  • 参数 (midder, { table, pager })
  • 必要 true
  • 返回
  • 详细

在构建好列表内部table组件和pager组件后调用

js
render(midder, { table, pager }) {
  // 可以在此处进行组黄和布局，决定了最终的渲染
}

mounte ​

  • 类型 Function
  • 参数 (midder)
  • 必要 false
  • 返回
  • 详细

列表已经准备渲染完毕时调用

js
mounte(midder) {
	// 列表渲染完毕的回调，可进行表体数据的加载
	midder.table.reload();
}

示例为列表加载完毕后，通知获取列表表体数据

update ​

  • 类型 Function
  • 参数 (midder)
  • 必要 false
  • 返回 promise
  • 详细
js
update: async (midder) => {
	const httpApi = 模拟接口;
	// 列表需要更新时的回调，控制表体数据的加载过程
	const { proxy, filter, table } = midder;
	// filter.values：筛选区参数，table.values：列表静态参数，
	const res = await httpApi({ ...filter.values, ...table.values });
	// 更新表体数据
	proxy.datas = res.datas;
	// 更新当前页码
	proxy.currentPage = res.page || 1;
}

示例为用接口获取列表数据，并响应式更新列表和分页渲染，由reload触发

列表请求参数

  • Jiess基础库提供的TableFilter组件，会自动在midder上挂载filter实例， 其中筛选区的数据会存储在filter.values，它会随着筛选区表单数据的变化而自动更新
  • 对于静态的，无需变化的列表请求参数，如Id等，放入table.values中
  • 为了方便封装，建议您在自定义筛选组件或存放静态数据时也遵循此规则

JiessTable实例方法 ​

构建JiessTable时，会在midder上挂载table实例，下面介绍其暴露出来的方法

reload ​

  • 类型 Function
  • 参数 无
  • 返回 无
  • 详细 触发update生命周期，触发列表渲染

调用reload()且时便会执行update生命周期，通知列表的更新

SuperTable ​

SuperTable是基于JiessTable的封装，封装了接口请求，使用更方便

  • 内置了通用列表布局，按照筛选区，列表主体，分页区，从上至下排布
  • 将筛选区，列表主体，分页区，以及编辑和新增融为一体，统一管控
  • 使用接口获取列表数据，并自动管理列表的数据加载

使用SuperTable组件 ​

注：Jiess全局组件，仅能在Jiess环境中使用

js
// setup函数中（jiess环境下）
import items from './items.js';
function setup() {
	this.add(
		this.render({
			//直接使用全局注册的组件名即可
			is: 'SuperTable',
			items: items,
			HttpApi: Promise接口
		})
	)
}

注：HttpApi和items为必要参数

SuperTable组件配置属性 ​

items ​

  • 类型 Function|Array
  • 参数 (midder ,itemsParam)
  • 必要 true
  • 返回
  • 详细

用于列表表头的配置，掌控列表整体的渲染

js
// items为数组
const items = [
	{ prop: 'name', label: '姓名' },
	{ prop: 'gender', label: '性别' },
	{ prop: 'age', label: '年龄' }
];

// items为function
const items = function(midder){
	return [
		{ prop: 'name', label: '姓名' },
		{ prop: 'gender', label: '性别' },
		{ prop: 'age', label: '年龄' }
	]
}

注：与JiessTable完全一致

datas ​

  • 类型 Array
  • 必要 false
  • 返回
  • 详细

初始化列表表体的数据

js
const datas = [
	{ key: 'id_1', name: '小明', gender: '男', age: 16 },
	{ key: 'id_2', name: '小强', gender: '男', age: 18 },
	{ key: 'id_3', name: '小红', gender: '女', age: 17 }
];

注：与JiessTable完全一致

httpApi ​

  • 类型 JiessApi|Promise
  • 必要 false
  • 详细

提供一个接口，组件会在初始加载，筛选及分页交互时自动发起请求

TableFilter ​

  • 类型 Jiess组件
  • 必要 false
  • 详细 用于展示筛选区的组件，不提供则无筛选区

initLayout ​

  • 类型 Function
  • 上下文 SuperTableContext
  • 形参 (midder, filterNode, tableNode)
  • 返回 重新组装后的jiessNode
  • 详细 将筛选区和列表主体进行定制化的组装

param ​

  • 类型 Object
  • 必要 false
  • 详细 综合参数的集合，详情见下表

注：其余属性作为JiessTable组件的直接属性

param 综合参数 ​

下面表格中综合列举param中的属性

属性名类型默认值说明
titleString列表列表左上标题
primaryKeyStringid列表键名对应字段
initLayoutFunction——初始化整体布局
initExtraFunction——初始化列表右上
cardParamObject——布局容器参数
filterParamObject——列表筛选区参数
updateTypeStringlistUpdate列表更新方案，可选listUpdate/tableUpdate
isCardBoolean——列表是否被Card包裹
isPagerBooleantrue默认带分页
isCheckboxBooleantrue默认带复选框
immedicatBooleantrue初始是否加载列表
httpTagstring——loading的加载标记
httpFieldstringlist调用接口集合中的方法名
httpConverFunction——处理请求到的数据，并返回新的列表数据
pagerBoxParamObject——分页容器参数
tableBoxParamObject——列表容器参数
selectionParamArray[]复选参数配置，仅适用于react
其余属性————作为原框架的table组件的参数

SuperTable生命周期 ​

SuperTable在JiessTable生命周期的基础上进行了扩展

  • beforeCreate：初始创建阶段，数据还未准备
  • created：初始创建阶段，数据刚准备完毕
  • beforeMounte：列表渲染完毕的回调，可进行表体数据的加载
  • mounte：列表刚渲染完毕，但还未发起表体更新
  • mounted：列表刚渲染完毕，并已经发起表体更新
  • render：列表的渲染过程，在此对表体，筛选区，分页区进行布局和整体把控
  • beforeUpdate：列表需要更新时的回调，但还未发起表体更新
  • updated：列表需要更新时的回调，并已经发起表体更新

基于SuperTable的TableFilter列表 ​

使用通用筛选组件，通过接口调用，实现完整的增删改查

查看示例

基于SuperTable的ExpandFilter列表 ​

使用可展开筛选区组件，通过接口调用，实现完整的增删改查

查看示例

注：可展开组件目前仅支持vue-element环境