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 相关文章推荐
JS localStorage实现本地缓存的方法
Jun 22 Javascript
JS数组(Array)处理函数整理
Dec 07 Javascript
BootStrap中Datetimepicker和uploadify插件应用实例小结
May 26 Javascript
浅谈js构造函数的方法与原型prototype
Jul 04 Javascript
判断输入的字符串是否是日期格式的简单方法
Jul 11 Javascript
学习掌握JavaScript中this的使用技巧
Aug 29 Javascript
jQuery如何解决IE输入框不能输入的问题
Oct 08 Javascript
javascript实现数据双向绑定的三种方式小结
Mar 09 Javascript
ES6 javascript中Class类继承用法实例详解
Oct 30 Javascript
微信小程序签到功能
Oct 31 Javascript
微信小程序分包加载代码实现方法详解
Sep 23 Javascript
JS实现普通轮播图特效
Jan 01 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 zlib扩展实现页面GZIP压缩输出
2010/06/17 PHP
PHP_NETWORK_GETADDRESSES: GETADDRINFO FAILED问题解决办法
2014/05/04 PHP
php实现复制移动文件的方法
2015/07/29 PHP
PHP设计模式之工厂模式定义与用法详解
2018/04/03 PHP
替代window.event.srcElement效果的可兼容性的函数
2009/12/18 Javascript
Jquery刷新页面背景图片随机变换的实现方法
2013/03/15 Javascript
jQuery实现长文字部分显示代码
2013/05/13 Javascript
解析JavaScript中的标签语句
2013/06/19 Javascript
jquery中post方法用法实例
2014/10/21 Javascript
jQuery中change事件用法实例
2014/12/26 Javascript
js+HTML5实现canvas多种颜色渐变效果的方法
2015/06/05 Javascript
举例讲解AngularJS中的模块
2015/06/17 Javascript
纯JavaScript代码实现移动设备绘图解锁
2015/10/16 Javascript
JavaScript 正则表达式中global模式的特性
2016/02/25 Javascript
JavaScript String(字符串)对象的简单实例(推荐)
2016/08/31 Javascript
jquery实现下拉框多选方法介绍
2017/01/03 Javascript
详解小程序输入框闪烁及重影BUG解决方案
2018/08/31 Javascript
node.js实现为PDF添加水印的示例代码
2018/12/05 Javascript
layui的表单验证支持ajax判断用户名是否重复的实例
2019/09/06 Javascript
VUE实现密码验证与提示功能
2019/10/18 Javascript
十分钟教你上手ES2020新特性
2020/02/12 Javascript
vue实现滚动鼠标滚轮切换页面
2020/12/13 Vue.js
[02:36]DOTA2亚洲邀请赛小组赛精彩集锦:EE凭借法力虚空拿下4杀
2017/03/30 DOTA
Python访问MySQL封装的常用类实例
2014/11/11 Python
python打开文件并获取文件相关属性的方法
2015/04/23 Python
python 根据正则表达式提取指定的内容实例详解
2016/12/04 Python
python函数式编程学习之yield表达式形式详解
2018/03/25 Python
opencv 查找连通区域 最大面积实例
2020/06/04 Python
几道PHP面试题
2013/04/14 面试题
高校学生干部的自我评价分享
2013/11/04 职场文书
化学教师自荐信范文
2013/12/28 职场文书
大学生自我评价范文分享
2014/02/21 职场文书
软件毕业生个人鉴定
2014/03/03 职场文书
应届生求职信范文
2014/05/26 职场文书
个人事迹材料范文
2014/12/29 职场文书
vue如何清除浏览器历史栈
2022/05/25 Vue.js