服务端控制前端表格渲染
功能特色:
- 服务器端控制
- 数据过滤
- 数据排序
- 分页处理
- 前后分离设计
- 多种前端渲染支持
- 快速构建产品
$ npm i @zenweb/grid @zenweb/formyarn add @zenweb/template @zenweb/template-nunjuckssrc/index.ts
import { create } from 'zenweb';
import modForm, { formTemplate } from '@zenweb/form';
import modGrid, { gridTemplate } from '@zenweb/grid';
import modTemplate from '@zenweb/template';
import nunjucks from '@zenweb/template-nunjucks';
create()
.setup(modForm())
.setup(modGrid())
.setup(modTemplate({
engine: nunjucks({
path: [
'./template', // 项目模板文件夹
formTemplate, // 过滤表单需要使用
gridTemplate, // 数据表格渲染模板
],
}),
}))
.start();src/controller/demo.ts
import { Context, mapping } from "zenweb";
import { widgets } from '@zenweb/form';
import * as moment from 'moment';
import { GridBase } from "@zenweb/grid";
import { User } from "../model";
function ageRange(min: number, max: number) {
return {
$between: [
moment().subtract(max, "y").format("YYYY-MM-DD"),
moment().subtract(min, "y").format("YYYY-MM-DD"),
],
};
}
class UserGrid extends GridBase<User> {
setup() {
this.column("id").label("ID").sortable().width(50);
this.column("name").label("姓名").width(100).dataElement(row => this.createElement().style({ color: 'red' }));
// this.column("profile.edu").label("教育");
this.column("birthday").label("生日").width(100).data(row =>
row.birthday ? moment(row.birthday).format("YYYY-MM-DD") : "无"
);
this.column("created_at").label("注册日期").sortable().data(row => moment(row.created_at).format("YYYY/M/D H:mm"));
// 自定义数据列元素
this.column("auth", false).dataElement(row => this.createElement()
.class('aaa', 'ccc', '', { bbb: true, ccc: false })
.style({ backgroundColor: 'rgba(75,173,58,0.30)' }).append('自定义数据列元素'));
// 数据列子元素
this.column("actions", false).dataElement(row => [
this.createElement('a').attr('href', `/edit/${row.id}`).append('编辑'),
]);
// 数据过滤器定义
this.filter("age", fields.select('int').label("年龄段").choices([
{ label: "毛蛋", value: 0 },
{ label: "少年", value: 1 },
{ label: "壮年", value: 2 },
{ label: "中年", value: 3 },
{ label: "老年", value: 4 },
])).where(value => [
{ birthday: ageRange(0, 18) },
{ birthday: ageRange(18, 40) },
{ birthday: ageRange(18, 40) },
{ birthday: ageRange(40, 55) },
{ birthday: ageRange(55, 100) },
][value]);
this.filter("created_at", fields.dateRange('date[]').label("注册日期").end(new Date()))
.where(value => ({ created_at: { $between: value } }));
this.filter("search", fields.text('trim1').label("关键词搜索"))
.where((value) => ({ name: { $like: `%${value}%` } }));
this.filter("cas", fields.cascader('int').label("级连选择").choices([
{ label: "第一层", value: 1 },
{ label: "第二层", value: 2, parent: 1 },
])).where(() => {
console.log('查询处理');
return {};
});
// 设置默认排序
this.setOrder("-id");
// 自定义数据行元素
this.setDataRowElement(row => this.createElement()
.style({ backgroundColor: (row.id || 0) % 4 ? undefined : 'rgba(100, 0, 0, 0.2)' }));
}
}
export class DemoController {
/**
* 服务器端 html 渲染
*/
@mapping()
async index(ctx: Context, grid: UserGrid) {
ctx.template('grid.html.njk');
return {
grid: await grid.fetch(User.find()),
};
}
/**
* 前后分离接口输出
*/
@mapping()
async grid(grid: UserGrid) {
return await grid.fetch(User.find());
}
}template/grid.html.njk
{% from "zenweb/form/macro.html.njk" import formStyle, formScript -%}
{% from "zenweb/grid/macro.html.njk" import gridRender, gridStyle, gridScript -%}
<html>
<head>
<title>zenweb grid demo</title>
{{formStyle()}}
{{gridStyle()}}
</head>
<body>
{{gridRender(grid)}}
{{formScript()}}
{{gridScript()}}
</body>
</html>