189 8069 5689
今天小编给大家分享一下怎么在React中使用BodeGrid全自动数据表格组件的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。
创新互联建站-专业网站定制、快速模板网站建设、高性价比英吉沙网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式英吉沙网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖英吉沙地区。费用合理售后完善，10多年实体公司更值得信赖。
新增和编辑
设计思路：
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全自动数据表格组件”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注创新互联行业资讯频道。