React 全自动数据表格组件——BodeGrid的实现思路

React 全自动数据表格组件——BodeGrid的实现思路

表格是在后台管理系统中用的最频繁的组件之一，相关的功能有数据的新增和编辑、查询、排序、分页、自定义显示以及一些操作按钮。这篇文章主要介绍了React 全自动数据表格组件——BodeGrid ,需要的朋友可以参考下

表格是在后台管理系统中用的最频繁的组件之一，相关的功能有数据的新增和编辑、查询、排序、分页、自定义显示以及一些操作按钮。我们逐一深入进行探讨以及介绍我的设计思路：

表格是在后台管理系统中用的最频繁的组件之一，相关的功能有数据的新增和编辑、查询、排序、分页、自定义显示以及一些操作按钮。我们逐一深入进行探讨以及介绍我的设计思路：

新增和编辑

想想我们最开始写新增编辑页面是怎么做的，是不是一个页面一个页面的写，然后要么表单提交要么Ajax提交。后台有无数个新增和编辑的视图页，现在想想真是恐怖啊，看着都累。后面接触到kendoui的grid组件，看到只需要配置列的属性以及保存的地址就能自动完成新增和编辑功能，着实让我兴奋了一把。然而不幸的是我几乎找遍了react所有的组件库，都没找到一个类似的组件，无奈只有自己动手了。设计思路：

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

2、为不同类型提供不同的操作组件，比如文本的input组件，图片的file组件。这样在新增和编辑的时候会根据列以及其类型生成对应的表单。

3、保存用户输入，提交至配置的url地址。

查询、排序、分页

查询、排序和分页几乎是每个表格页面必须的功能，实现方式也多种多样，这里介绍表格万能查询和排序的设计思路：

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

2、