反应自动数据表组件——的实现思想

表格是后台管理系统中最常用的组件之一，其相关功能包括添加和编辑数据、查询、排序、分页、自定义显示和一些操作按钮。我们逐一讨论和介绍我的设计理念：

表格是后台管理系统中最常用的组件之一，其相关功能包括添加和编辑数据、查询、排序、分页、自定义显示和一些操作按钮。我们逐一讨论和介绍我的设计理念：

添加和编辑

想想我们是如何开始编写新的编辑页面的，是一次写一页，然后要么提交表单，要么提交Ajax。后台有无数新的编辑过的视图页面。现在想想真可怕。看着很累。接触到kendoui的网格组件，看到添加和编辑的功能只需要配置列的属性和保存的地址就可以自动完成，真的很激动。不幸的是，我几乎搜索了react的所有组件库，但找不到类似的组件，所以我不得不自己做。设计理念：

1.设置每一列的类型，比如文字、数字、图片、时间、bool值、下拉选择框等等。

2.针对不同的类型提供不同的操作组件，如文本的输入组件和图片的文件组件。这样，在添加和编辑时，就会根据列及其类型生成相应的表单。

3.保存用户输入并将其提交到配置的url地址。

查询、排序、分页

查询、排序、分页几乎是每一个表单页面必备的功能，实现的方式有很多种。本文介绍了表单通用查询和排序的设计思想：

1.是否可以查询每一列应该是可配置的。

2.对于不同的数据类型，查询条件应该不同，例如文本的“包含”条件和数字的“大于”条件。

3.后端处理要统一，为每个查询条件编写查询逻辑是吃力不讨好的工作。

4.每列是否可以排序是可配置的。排序可以分为正序和逆序。

最终表单的请求主体设计如下：

{ 'pageIndex':1，' pageSize':15，' sort conditions ' :[{ ' sort field ' : ' name '，' listSortDirection':1 } ]，' filter group ' : { ' rules ' :[{ ' field ' : ' display name '，' operate ' : ' contains '，' value ' : ' a ' } }的整个组件的源代码还是比较复杂的感兴趣的学生可以在react-demo中查看bode-grid.js源代码，地址：https://github.com/liuxx001/react-demo.git

但是，它的使用仍然非常简单，如下所示：

getinitialstate 3360 function(){让网格选项={ref:this，title: '角色列表'，url3360 {read:api前缀' zero/role/getrolepagedlist '，add : API prefix ' zero/Role/CreateRole '，edit 3360 API prefix ' zero/Role/UpdateRole '，delete 3360 API prefix ' zero/Role/DeleteRole ' }，column :[{ Title 3: '角色名称'，}几个代码就可以完全实现显示、添加、编辑、排序、查询、分页等功能。显示效果是：

博德网格表api:

参数类型描述默认值ref object ref指向自身，用于绑定数据ref:this这一行的按钮。固定写入标题字符串表标题url对象远程api接口配置列数组[对象]表列属性配置操作数组[对象]自定义按钮页面大小数字在表的右上角。显示的页数是15。页面大小选项数组[字符串]可选显示数字['10 '，' 15 '，' 20 '，' 30 '，' 50 '，' 100']排序字段字符串第一列排序方向字符串初始排序方法desc列属性详细信息：

摘要

以上就是边肖介绍的React自动数据表组件——BodeGrid的实现思路。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！