React 全自动数据表格组件——BodeGrid的实现思路
表格是在后台管理系统中用的最频繁的组件之一，相关的功能有数据的新增和编辑、查询、排序、分页、自定义显示以及一些操作按钮。我们逐一深入进行探讨以及介绍我的设计思路：
表格是在后台管理系统中用的最频繁的组件之一，相关的功能有数据的新增和编辑、查询、排序、分页、自定义显示以及一些操作按钮。我们逐一深入进行探讨以及介绍我的设计思路：
新增和编辑
想想我们最开始写新增编辑页面是怎么做的，是不是一个页面一个页面的写，然后要么表单提交要么Ajax提交。后台有无数个新增和编辑的视图页，现在想想真是恐怖啊，看着都累。后面接触到kendoui的grid组件，看到只需要配置列的属性以及保存的地址就能自动完成新增和编辑功能，着实让我兴奋了一把。然而不幸的是我几乎找遍了react所有的组件库，都没找到一个类似的组件，无奈只有自己动手了。设计思路：
1、设置每一列的类型，比如文本、数字、图片、时间、bool值、下拉选择框等等。
2、为不同类型提供不同的操作组件，比如文本的input组件，图片的file组件。这样在新增和编辑的时候会根据列以及其类型生成对应的表单。
3、保存用户输入，提交至配置的url地址。
查询、排序、分页
查询、排序和分页几乎是每个表格页面必须的功能，实现方式也多种多样，这里介绍表格万能查询和排序的设计思路：
1、每一列是否可以查询应该是可以配置的。
2、针对不同的数据类型查询条件应该有所区别，比如文本有“包含”条件，数字有“大于”条件等。
3、后端的处理应该统一，为每一个查询条件编写查询逻辑是很费力不讨好的工作。
4、每一列是否可以排序是可以配置的，排序分正序和倒序.
最后表格的请求体设计如下：
{
"pageIndex":1,
"pageSize":15,
"sortConditions":[
{
"sortField":"name",
"listSortDirection":1
}
],
"filterGroup":{
"rules":[
{
"field":"displayName",
"operate":"contains",
"value":"a"
}
]
}
}
整个组件的源码还是比较复杂，这里就不深入了，有兴趣的同学可以查看react-demo中的bode-grid.js源码，地址：https://github.com/liuxx001/react-demo.git
不过使用起来还是很简单的，如下所示：
getInitialState:function () {
let gridOptions={
ref:this,
title:"角色列表",
url:{
read:ApiPrefix+"zero/role/GetRolePagedList",
add:ApiPrefix+"zero/role/CreateRole",
edit:ApiPrefix+"zero/role/UpdateRole",
delete:ApiPrefix+"zero/role/DeleteRole"
},
columns:[
{title:"角色名",data:"name",type:"text",editor:{},query:true},
{title:"显示名",data:"displayName",type:"text",editor:{},query:true},
{title:"是否静态角色",data:"isStatic",type:"switch",editor:{},query:true},
{title:"是否默认角色",data:"isDefault",type:"switch",editor:{},query:true},
{title:"操作选项",type:"command",actions:[{name:"设置权限",onClick:showPermissionModel}]}
]
};
return {
gridOptions: gridOptions
};
}
很少的代码就能完全实现表格的展示、新增、编辑、排序、查询、分页等功能，显示效果：
BodeGrid表格api：
|
参数
|
类型
|
说明
|
默认值
|
|
ref
|
object
|
ref指向本身，用于行内按钮绑定数据
|
ref:this,固定写法
|
|
title
|
string
|
表格标题
|
|
|
url
|
object
|
远程api接口配置 |
|
|
columns
|
array[object]
|
表格列属性配置
|
|
|
actions
|
array[object]
|
表格右上角自定义按钮
|
|
|
pageSize
|
number
|
每页显示数量
|
15
|
|
pageSizeOptions
|
array[string]
|
可选显示数量
|
["10","15","20","30","50","100"]
|
|
sortField
|
string
|
初始排序字段
|
第一列
|
|
sortDirection
|
string
|
初始排序方式 |
desc
|
columns属性详细介绍：
总结
以上所述是小编给大家介绍的React 全自动数据表格组件——BodeGrid的实现思路 ,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
相关文章
React Hooks是今年最劲爆的新特性真的毫不夸张。如果你也对react感兴趣，或者正在使用react进行项目开发，请抽出点时间阅读下此文2022-03-03
react事件绑定时。this并不会指向当前DOM元素。往往使用bind来改变this指向，今天通过本文给大家介绍React事件绑定的方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2022-12-12
Hook是 React 16.8 的新增特性。它通常与函数式组件同时使用。可以使函数式组件在不编写 class 的情况下，可以拥有class组件的状态、生命周期、引用等功能，这篇文章主要介绍了React自定义hook的相关知识,需要的朋友可以参考下2022-06-06
这篇文章主要为大家分享了React Native时间转换格式工具类，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-10-10
这篇文章主要给大家介绍了关于React Component存在的几种形式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-11-11
ReactNative页面跳转Navigator实现的示例代码
本篇文章主要介绍了ReactNative页面跳转Navigator实现的示例代码，具有一定的参考价值，有兴趣的可以了解一下2017-08-08
这篇文章主要为大家介绍了React Ref Callback使用场景最佳实践详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
在复杂的React应用中,某些计算密集型或耗时操作可能会阻塞主线程,导致用户界面出现卡顿或响应慢的现象,为了优化用户体验,可以采用Web Worker来在后台线程中执行这些操作,本文将详细介绍在React项目中如何集成和使用Web Worker来改善应用性能,需要的朋友可以参考下2023-12-12
Refs是一个 获取 DOM节点或React元素实例的工具,在React中Refs 提供了一种方式,允许用户访问DOM 节点或者在render方法中创建的React元素,这篇文章主要给大家介绍了关于React中refs的一些常见用法,需要的朋友可以参考下2022-12-12
这篇文章主要介绍了react项目如何使用iconfont的方法步骤，这里介绍下如何在项目中配置。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-03-03
最新评论