如何在React中使用BodeGrid全自动数据表格组件
这篇文章给大家介绍如何在React中使用BodeGrid全自动数据表格组件,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。
专注于为中小企业提供网站制作、网站设计服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业尼勒克免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了上千多家企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。
新增和编辑
设计思路:
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全自动数据表格组件
新闻来源:http://scyanting.com/article/gjjpps.html