antd-crud v1.0.1 发布,一个 React 增删改查高阶组件
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 的表单拖拽设计组件(准备中...)。
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
DBeaver 23.2.3 发布,可视化数据库管理平台
DBeaver 是一个免费开源的通用数据库工具,适用于开发人员和数据库管理员。DBeaver 23.2.2 现已发布,更新内容如下: Data editor: Excel (XLSX) 导出现在支持列自动调整 修复了从上下一行复制命令 “Got to column”列的快捷方式更改为 Ctrl+Shift+G SQL editor: 扩展了脚本统计配置 修复了 AI completion bugs 并重新设计了配置 UI 修复了水平模式下关闭的选项卡 连接关联保存的脚本已修复 Data export: 针对 schema-less据库修复了数据导入任务 列值转换表达式评估已修复 所有数据传输均迁移至新的 IO API 现在可以完全禁用导出功能 修复了丢失数据库对象的任务加载问题 ER diagrams:一对一连接渲染已修复 General: 默认文件编码已更改为 UTF-8。IT 影响所有外部工具集成。 基于 Web 的身份验证现在默认在外部浏览器中打开 现在可以完全禁用版本更新功能 Databases: Clickhouse:地图数据类型可视化已修复 Databricks:国家编码问...
- 下一篇
BuildAdmin-v2.0.3-20230908 发布,动态注册路由、鉴权等多处优化
`BuildAdmin`终于上线了问答社区,我们鼓励所有的开发者加入这个社区,分享自己的经验和知识,与其他成员互动交流~https://ask.buildadmin.com 新增 - 前台菜单支持无限层级嵌套 - 独立出表格内部组件自动调用的鉴权方法,便于开发者重写 - 前端公共函数`auth`可以通过传递菜单规则的 name 鉴权 - 删除 web 端中多余的默认头像文件 - 会员中心增加可选的 query 指定会员登录成功后自动跳转的URL - 上传类增加一个`setTopic`方法 重构/优化/修复 - 优化控制台菜单规则(增加了查看权限节点) - 公共函数`get_table_list`默认不再去除表注释中的:后缀`表`字 - 管理员管理中的分组字样改为角色组 - 角色组管理增加权限说明的备注 - 取消前台用户头像必填 - 重置公共搜索表单时,自动刷新表格 - 内置的后台功能中默认ID字段搜索时不再使用模糊查询 - 不再需要清理`css charset`,所以删除多余代码 - 去除多余的 htmlspecialchars 参数(富文本入库可能被多次转义) - 修复顶栏菜单在非激...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- CentOS8编译安装MySQL8.0.19
- Eclipse初始化配置,告别卡顿、闪退、编译时间过长
- SpringBoot2整合MyBatis,连接MySql数据库做增删改查操作
- Mario游戏-低调大师作品
- SpringBoot2整合Thymeleaf,官方推荐html解决方案
- CentOS8安装MyCat,轻松搞定数据库的读写分离、垂直分库、水平分库
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- Linux系统CentOS6、CentOS7手动修改IP地址
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果
- Hadoop3单机部署,实现最简伪集群