Antd-Crud v1.0.0 发布,一个基于 Antd 的增删改查高级组件


Antd-Crud

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

特征

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

已完成功能

  •  基本增删改查
  •  分页加载
  •  搜索面板
  •  搜索面板自动收缩
  •  批量删除
  •  数据刷新
  •  EXCEL 导出
  •  行高设置
  •  打印功能

开始使用

安装:

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: 是否支持搜素
  • form: 编辑表单的 form 设置,类型为 FormConfig

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,

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

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

运行演示

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

npm install
npm run dev
 

AntdAdmin 简介

AntdAdmin 是一个以 React + Ant.Design 为基础的开源技术社群,其开源(或计划开源)的高级组件有:

  • antd-crud:一个基于 React + Ant.Design 的增删改查高级组件(已开源)。
  • antd-bpmn:一个基于 React + Ant.Design 的工作流设计组件(准备中...)。
  • antd-builder:一个基于 React + Ant.Design 的拖拽设计组件(准备中...)。

 


相關推薦

2023-10-21

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

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-24

OSC 请你来轰趴啦!1028 苏州源创会,一起寻宝 AI 时代 Antd-Crud 一个基于 React + Ant.Design 的增删改查组件。 特征 1、极轻量,只依赖于 Ant.Design 再无其他任何依赖 2、支持基本的【增删改查】和【批量删除】功能 3、支持

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

2023-04-14

v1.0.0 更新内容: 1、设计、规划和研发基础 RBAC 权限架构; 2、编写框架核心底层代码,设计基于 Layout 布局的模板,设计并编写自定义模板 html 文件; 3、对系统模板进行架构设计及模板继承相关设计; 4、研发框架基础模块,

2023-08-04

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

2022-11-06

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

2023-08-12

v1.0.0 更新内容: 1、搭建基于 ThinkPHP8 的项目架构; 2、新增角色、菜单、节点等权限架构体系; 3、新增基础用户、角色、菜单等基础模块; 4、新增字典、配置等基础数据模块; 5、新增广告、友链、站点等业务模块; 6、新增

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

2023-11-15

译 dev 分支代码来体验这些新功能。或者等待 1.17.0 版本发布升级(安装)体验。 如果您对我们的项目感兴趣,欢迎贡献源码或 fork 源码 GitHub Gitee 感谢大家支持。

2024-10-01

进行学习、毕设、企业等使用。 Skyeye 云智能制造 v3.14.7 发布 ,发布内容如下: Skyeye 云已加入 Dromara 社区 移动端:注册页面、短信登录页面、设置页面、短信发送组件、退出登录、忘记密码、增加商品分类页面功能

2023-11-03

的解决方案。目前Dolt也已经准备好投入生产。 而当前发布的 DoltSQL 是对 PostgreSQL 的支持。DoltSQL的工作原理是模拟PostgreSQL服务器,并将接收到的命令转换为交给底层Dolt服务器的AST。这使得能够快速启动并运行,同时利用Dolt已

2024-05-05

我们会在未来的0.3.0版本,随同其他核心功能升级,一同发布Admin Dashboard的正式版。正式版功能会包括: 可以配置的数据统计仪表盘 完善的数据筛选、滚动加载和组件类型配置 更强大的表单和富文本编辑 其它更强