bird-front全自动数据表格组件bird-grid

Posted 2020-10-20 liuyh

bird-grid是bird-front前端框架中实现的全自动数据表格组件。组件内部处理数据加载、分页、排序、查询、新增、编辑等一系列操作。让业务表格的开发从繁复的增删查改中脱离出来，编码简洁却又功能强大。

功能特性

• 丰富的列类型支持，包括文本、文本域、数字、bool、下拉选择器、级联选择器、富文本、图片、日期、时间等类型。
• 新增、编辑零代码，支持自定义的编辑配置（提示、是否必填、正则验证等）。
• 查询、排序、分页零代码。每列均可查询、排序。
• 自定义操作按钮，默认提供新增、修改、删除的操作按钮。
• 组件内部支持按钮级权限控制。

示例代码

render() {
    let gridOption = {
      url: {
        read: "/sys/dic/getPaged",
        add: "/sys/dic/save",
        edit: "/sys/dic/save",
        delete: "/sys/dic/delete"
      },
      columns: [
        {title: "编号", data: "id", type: "number",},
        {title: "字典名称", data: "name", type: "text", editor: {}, query: true},
        {title: "Key", data: "key", type: "text", editor: {}, query: true},
        {title: "默认业务码", data: "defaultCode", type: "text", editor: {}, query: true},
        {title: "创建时间",data: "createTime",type: "datetime",query: true},
        {title: "操作选项", type: "command", actions: []}
      ]
    };
    return (<BirdGrid gridOption={gridOption}/>)
  }

 

效果图

API

参数	说明	类型	默认值
url	表格相关服务api配置	object	{}
permission	权限相关配置	object/string	{}
checkable	是否添加Checkbox选择框	bool	false
columns	表格列配置	array	[]
pageSize	每页数据条数	number	15
pageSizeOptions	每页数量选项数组	array	["10", "15", "20", "30", "50", "100"]
primaryKey	标识列	string	第一列的data参数
sortField	排序字段：‘asc‘、‘desc‘	string	‘desc‘
actions	右上角操作按钮集合	array	[新增]
customRules	自定义筛选条件	array	[]

url相关API

参数	说明	类型	默认值
read	数据读取服务端url	string	‘‘
add	数据新增url	string	‘‘
edit	数据更新url	string	‘‘
delete	数据删除url	string	‘‘

注：所有接口均使用POST提交，read为必填项，其他配置均选填，不配置则不显示相关的操作按钮。

表格请求json格式：

{
    "filters": [
        {
            "field": "string",
            "operate": "string",
            "value": "string"
        }
    ],
    "pageIndex": 0,
    "pageSize": 0,
    "sortDirection": 0,
    "sortField": "string"
}

 

read接口返回json格式：

{
    "items": [],
    "totalCount": "10"
}

items中对象的字段对应表格中的列。

 

permission相关API

参数	说明	类型	默认值
add	新增权限名称	string	‘‘
edit	编辑权限名称	string	‘‘
delete	删除权限名称	string	‘‘

add/edit/delete各自对应新增/编辑/删除的权限名称，不配置则表示不验证对应的权限。
permission支持字符串格式，表格初始化时会自动为其添加:add/:edit/:delete权限名。

 

columns相关API

参数	说明	类型	默认值
title	列名称	string
data	对应数据的字段名	string
type	列类型。text、textarea、richtext、number、switch、dropdown、cascader、img、date、datetime、hide、command	string
query	列是否可以查询	bool	false
sortDisable	列是否禁止排序	bool	false
hide	列是否隐藏	bool	false
render	自定义列渲染方法	function(v,d)
source	当列类型为dropdown（下拉选择）或cascader（级联选择）时的数据源	object
actions	当列类型为command时的操作按钮数组	array	[编辑、删除]
editor	列的编辑设置	object

说明：

• render(v,d){}方法第一个参数表示当前行当前列的数据，第二个参数表示整行的数据。
• scource:{data:[],url:‘‘,key:‘‘}。当类型为`dropdown`时，其中data、url、key分别对应`bird-selector`中的data、url、dicKey。当类型为`cascader`时，data、url分别对应`bird-cascader`中的data、url。

editor相关API

参数	说明	类型	默认值
ep	编辑模式。‘default‘,‘hide‘,‘disabled‘	string	‘default‘
ap	新增模式。‘default‘,‘hide‘,‘disabled‘	string	‘default‘
tips	提示信息	string	‘‘
isRequired	是否必填	bool	false
validateRegular	验证的正则表达式	object
step	number类型下的步长	number	1
precision	number类型的精度（小数的位数）	number	0

actions相关API

参数	说明	类型	默认值
name	按钮名称	string
onClick	点击事件	function(data)	(data)=>{}
nameFormat	按钮名称渲染方法，根据行数据渲染不同的按钮名	function(data)
hideFunc	根据行数据判断按钮是否显示方法	function(data)
permissionName	所需权限名	string

说明：

• 本表格所有方法接收的data为行数据（右上角按钮的onClick事件除外）；
• nameFormat，只对行内action有效，优先级高于name；
• hideFunc，只对行内action有效，存在且hideFunc(data)为true时，该按钮隐藏；
• permissionName实现按钮级权限控制；
• onClick。右上角按钮：data表示表格选中的值；行内按钮：data表示行数据；

 

customRules相关API

参数	说明	类型	默认值
field	列字段名称	string
value	值	string

说明：
customRules是在表格初始化之前为表格添加自定义查询条件，可用于url上不同参数对于表格数据的控制。

 

项目地址

组件源码在bird-front项目中有完整实现，项目地址：https://github.com/liuxx001/bird-front