antd-crud v1.0.1 发布,一个 React 增删改查高阶组件


OSC 请你来轰趴啦!1028 苏州源创会,一起寻宝 AI 时代

Antd-Crud

一个基于 React + Ant.Design 的增删改查组件。

特征

  • 1、极轻量,只依赖于 Ant.Design 再无其他任何依赖
  • 2、支持基本的【增删改查】和【批量删除】功能
  • 3、支持搜索、自定义分页和自定义排序等功能
  • 4、支持刷新、导出 Excel、数据打印、行高设置等功能
  • 5、更多的 DIY 配置

已完成功能

  •  基本增删改查
  •  分页加载
  •  搜索面板
  •  搜索面板自动收缩
  •  批量删除
  •  数据刷新
  •  EXCEL 导出
  •  行高设置
  •  打印功能
  •  编辑或查看页面可选 Modal 或者 Drawer
  •  编辑页面和查看页面分组设置
  •  编辑页面自定义布局

v1.0.1 版本更新

  • 新增:添加表单编辑、新增和查看时的分组显示功能
  • 新增:Drawer 的方式进行编辑、新增和现实的功能
  • 优化:数据查看页面添加禁止操作的鼠标样式显示
  • 优化:修改 formItemDisabled 为 formReadOnly
  • 优化:修改 onFormItemValueInit 为 onSearchValueInit;
  • 优化:优化 demo 展示的一些样式

开始使用

npm i @codeflex/antd-crud
 
function App() {

const columns: ColumnsConfig<Account> = [
{
title: '姓名',
dataIndex: 'name',
key: 'name',
placeholder:"请输入姓名",
supportSearch:true,
render: (text) => <a>{text}</a>,
},
{
title: '年龄',
dataIndex: 'age',
key: 'age',
supportSearch:true,
},
{
title: '地址',
dataIndex: 'address',
key: 'address',
supportSearch:true,
},
{
title: '标签',
key: 'tags',
dataIndex: 'tags',
supportSearch:true,
render: (_, { tags }) => (
<>
{tags.map((tag) => {
let color = tag.length > 5 ? 'geekblue' : 'green';
if (tag === 'loser') {
color = 'volcano';
}
return (
<Tag color={color} key={tag}>
{tag.toUpperCase()}
</Tag>
);
})}
</>
),
}
];


const data: Account[] = [
{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
tags: ['nice', 'developer'],
},
{
key: '2',
name: 'Jim Green',
age: 42,
address: 'London No. 1 Lake Park',
tags: ['loser'],
},
{
key: '3',
name: 'Joe Black',
age: 32,
address: 'Sydney No. 1 Lake Park',
tags: ['cool', 'teacher'],
},
];

const actions:Actions<Account> = {
onCreate:(account)=>{
console.log("onCreate", account);
}
};


return (
<div style={{width:"960px"}}>
<AntdCrud columns={columns}
dataSource={data}
actions={actions}
pageNumber={1}
pageSize={10}
totalRow={2342}/>
</div>
)
}
 

ColumnConfig 类型说明:

ColumnConfig 继承了 Antd 的 Table 的 Column 的所有配置,参考:https://ant-design.antgroup.com/components/table-cn#column

在此基础上,增加了自己的配置:

  • placeholder: 搜索框和编辑页面的占位内容
  • supportSearch: 是否支持搜素
  • colSpan: 占位长度,默认值为 20
  • colOffset: offset 默认值为 2
  • groupKey: 分组的 key
  • form: 编辑表单的 form 设置,类型为 FormConfig

ColumnGroup 类型说明:

用于在新增、编辑和查看页面,分组显示 form 内容。

export type ColumnGroup = {
key: string,
title: string,
}

FormConfig 类型说明:

type FormConfig = {

// 表单类型,默认为 Input,
// 支持:Input、InputNumber、Hidden、Radio、Checkbox、Rate、
// Switch、DatePicker、Select、Slider、Upload
type: string,

//自定义属性,支持 antd 控件的所有属性配置
attrs?: any,

//验证规则,只在编辑页面起作用
rules?: any[],
}

Actions 类型说明:

Actions 是用于定义 AntdCrud 组件的监听方法

Actions 定义的类型如下:

type Actions<T> = {
//获取数据列表
onFetchList?: (currentPage: number
, pageSize: number
, totalPage: number
, searchParams: any
, sortKey: string
, sortType: "asc" | "desc") => void,

//获取数据详情
onFetchDetail?: (row: T) => T,

//删除单条数据
onDelete?: (row: T) => void,

//批量删除数据
onDeleteBatch?: (rows: T[]) => void,

//数据更新
onUpdate?: (row: T) => void,

//数据创建
onCreate?: (row: T) => void,

//初始化搜索框的值
onSearchValueInit?:(key:string) => any
}

需要用户在 Actions 定义以上方法,用于对数据进行操作或查询。

运行演示

git clone https://gitee.com/antdadmin/antd-crud.git
cd antd-crud

npm install
npm run dev

AntdAdmin 简介

AntdAdmin 是一个致力于 中国信创 产业的前端开源框架,其底层技术栈主要以 React + Ant.design 为主。AntdAdmin 开源(或者计划开源)的产品主要如下:

  • antd-admin:一个基于 React + Ant.Design 的中(后)台 UI 框架(准备中...)。
  • antd-crud:一个基于 React + Ant.Design 的增删改查高级组件(已开源:https://gitee.com/antdadmin/antd-crud )。
  • antd-bpmn:一个基于 React + Ant.Design 的工作流设计组件(已开源:https://gitee.com/antdadmin/antd-bpmn )。
  • antd-builder:一个基于 React + Ant.Design 的表单拖拽设计组件(准备中...)。

相關推薦

2023-10-21

(的前两天),相约开源PHP办公室,我们一起聊 AI!>>> antd-crud 一个基于 React + Ant.Design 的增删改查组件。 特征 1、极轻量,只依赖于 Ant.Design 再无其他任何依赖 2、支持基本的【增删改查】和【批量删除】功能 3、支持

2023-10-15

Antd-Crud 一个基于 React + Ant.Design 的增删改查组件。 特征 1、极轻量,只依赖于 Ant.Design 再无其他任何依赖 2、支持基本的【增删改查】和【批量删除】功能 3、支持搜索、自定义分页和自定义排序等功能 4、支持刷新、

2023-10-21

于 React + Ant.Design 的中(后)台 UI 框架(准备中...)。 antd-crud:一个基于 React + Ant.Design 的增删改查高级组件(已开源:https://gitee.com/antdadmin/antd-crud )。 antd-bpmn:一个基于 React + Ant.Design 的工作流设计组件(已开源:http

2023-10-17

流高阶组件,开源网址:https://gitee.com/antdadmin/antd-bpmn - Antd-crud:一个优质的 React 【增删改查】高阶组件,基于 Ant.Design。开源网址:https://gitee.com/antdadmin/antd-crud  

2023-10-28

阶组件,开源网址:https://gitee.com/antdadmin/antd-bpmn - Antd-crud:一个优质的 React 【增删改查】高阶组件,基于 Ant.Design。开源网址:https://gitee.com/antdadmin/antd-crud

2022-11-18

与统一维护管理的模块。 通知公告:系统通知公告信息发布维护。 代码生成:一键生成模块 CRUD 的功能,包括后端和前端 Vue 等相关代码。 案例演示:常规代码生成器一键生成后的演示案例。 软件信息 软件名称:RXTh

2023-05-09

fastmybatis 2.6.0 发布,本次更新内容如下: @Column 注解新增logicDeleteStrategy枚举属性 PR,可选项有 LogicDeleteStrategy.FIXED_VALUE:固定值策略,notDeleteValue和deleteValue生效(UPDATE t_user SET isdel = 1 WHERE id = 1 AND isdel = 0;) LogicDel

2022-10-30

管理功能进行统一维护。 通知公告:系统通知公告信息发布维护。 操作日志:系统正常操作日志记录和查询;系统异常信息日志记录和查询。 登录日志:系统登录日志记录查询包含登录异常。 代码生成:一键生成模块 CR

2024-07-12

一、项目概述 随着信息技术的飞速发展,企业的 IT 基础设施日益复杂,运维管理变得更加重要和具有挑战性。为了帮助企业高效地管理其 IT 资产与运维流程。本项目旨在通过全面的资产管理、强大的凭据管理和快速的全文检

2023-11-07

数据。 据介绍,OpenAtom OpenHarmony 4.0 Release版本于10月27日发布,经过了32周的开发周期。 在此期间,有65499个Committs进入了版本。共有2220位贡献者为 4.0 Release版本做出了贡献。其中,华为贡献者1800名,累计2000+名,共增删改代码8

2023-02-08

contribution #472;   完整更新日志具体见 Release 发布版本。   APIJSON 九阴真经 - 软件开发行业的 ATM 机 接口全万能,前端不求人。要啥就有啥,所求即所得。 需求由它变,后端稳如山。不变应万变,上午就上线。

2023-09-26

MyBatis-Flex: 一个优雅的 MyBatis 增强框架 特征 1、很轻量 MyBatis-Flex 整个框架只依赖 MyBatis,再无其他任何第三方依赖。 2、只增强 MyBatis-Flex 支持 CRUD、分页查询、多表查询、批量操作,但不丢失 MyBatis 原有的任何功能

2023-07-22

v1.3.0 更新内容: 1、重新菜单模块和菜单表数据; 2、划分权限功能,不同账号根据角色权限获取不同的菜单; 3、修复用户已反馈的 BUG; 一款 Go 语言基于GoFrame、Vue3.x、AntDesign、MySQL等框架精心打造的一款模块化、插件化、高

2023-08-04

大的变化和修改,代码进行了重构。MySQL 8.0 在 2016-09-12 发布, 重写了 5.7 中解析器的近 50% 的代码。MySQL 将编程语言都统一到 C++,编译器使用最新版本,代码风格采用 Google C++ Style,统一了 300 人的开发团队的代码标准。 目前 M