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


Posted in Javascript onJune 12, 2019

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

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

新增和编辑

想想我们最开始写新增编辑页面是怎么做的,是不是一个页面一个页面的写,然后要么表单提交要么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 全自动数据表格组件——BodeGrid的实现思路 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
jQuery 技巧小结
Apr 02 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战一)
Aug 21 Javascript
javascript 实现字符串反转的三种方法
Nov 23 Javascript
js加载读取内容及显示与隐藏div示例
Feb 13 Javascript
JS实现鼠标经过好友列表中的好友头像时显示资料卡的效果
Jul 02 Javascript
JS基于MSClass和setInterval实现ajax定时采集信息并滚动显示的方法
Apr 18 Javascript
Bootstrap每天必学之警告框插件
Apr 26 Javascript
JS仿百度自动下拉框模糊匹配提示
Jul 25 Javascript
使用ionic切换页面卡顿的解决方法
Dec 16 Javascript
AngularJS常见过滤器用法实例总结
Jul 06 Javascript
用webpack4开发小程序的实现方法
Jun 04 Javascript
小程序中英文混合排序问题解决
Aug 02 Javascript
详解如何提升JSON.stringify()的性能
Jun 12 #Javascript
基于vue-cli搭建多模块且各模块独立打包的项目
Jun 12 #Javascript
浅谈webpack 四个核心概念之Entry
Jun 12 #Javascript
vue安装遇到的5个报错及解决方法
Jun 12 #Javascript
深入学习JavaScript 高阶函数
Jun 11 #Javascript
javascript防抖函数debounce详解
Jun 11 #Javascript
详解ng-alain动态表单SF表单项设置必填和正则校验
Jun 11 #Javascript
You might like
php上传文件中文文件名乱码的解决方法
2013/11/01 PHP
PHP中error_log()函数的使用方法
2015/01/20 PHP
[原创]smarty简单模板变量输出方法
2016/07/09 PHP
php中引用&的用法分析【变量引用,函数引用,对象引用】
2016/12/12 PHP
对于Laravel 5.5核心架构的深入理解
2018/02/22 PHP
PHP-FPM 的管理和配置详解
2019/02/17 PHP
Ajax 数据请求的简单分析
2011/04/05 Javascript
JavaScript中判断原生函数检查function是否是原生代码
2014/09/09 Javascript
js实现的捐赠管理完整实例
2015/01/20 Javascript
js实现文本框选中的方法
2015/05/26 Javascript
在HTML中插入JavaScript代码的示例
2015/06/03 Javascript
详解JavaScript中setSeconds()方法的使用
2015/06/11 Javascript
jQuery计算文本框字数及限制文本框字数的方法
2016/03/01 Javascript
Angularjs 实现一个幻灯片示例代码
2016/09/08 Javascript
原生javascript实现分页效果
2017/04/21 Javascript
关于在vue-cli中使用微信自动登录和分享的实例
2017/06/22 Javascript
微信小程序自动客服功能
2017/11/02 Javascript
vue 路由嵌套高亮问题的解决方法
2018/05/17 Javascript
node.js读取Excel数据(下载图片)的方法示例
2018/08/02 Javascript
详解小程序云开发攻略(解决最棘手的问题)
2019/09/30 Javascript
nodejs处理tcp连接的核心流程
2021/02/26 NodeJs
[05:05]DOTA2亚洲邀请赛 战队出场仪式
2015/02/07 DOTA
Python编写的com组件发生R6034错误的原因与解决办法
2013/04/01 Python
OpenCV+python手势识别框架和实例讲解
2018/08/03 Python
python读取txt文件,去掉空格计算每行长度的方法
2018/12/20 Python
实例讲解Python3中abs()函数
2019/02/19 Python
解决TensorFlow训练内存不断增长,进程被杀死问题
2020/02/05 Python
求∏的近似值,直到最后一项的绝对值小于指定的数
2016/02/12 面试题
斯福泰克软件测试面试题
2015/02/16 面试题
迟到检讨书400字
2014/01/13 职场文书
年会活动策划方案
2014/01/23 职场文书
英语系毕业生求职信
2014/07/13 职场文书
道路运输企业安全生产责任书
2014/07/28 职场文书
《中国梦我的梦》小学生演讲稿
2014/08/20 职场文书
环保主题班会教案
2015/08/13 职场文书
python数字图像处理之图像的批量处理
2022/06/28 Python