【bird-front】全自动数据表格组件bird-grid
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
【bird-front】全自动数据表格组件bird-grid的更多相关文章
- [React]全自动数据表格组件——BodeGrid
表格是在后台管理系统中用的最频繁的组件之一,相关的功能有数据的新增和编辑.查询.排序.分页.自定义显示以及一些操作按钮.我们逐一深入进行探讨以及介绍我的设计思路: 新增和编辑 想想我们最开始写新增 ...
- 全自动数据表格JQuery版
由于最近工作上有些变动,已经快一个月没有写博客了.上一篇博客[React]全自动数据表格组件——BodeGrid介绍了全自动数据表格的设计思路以及分享了一个react.js的实现.但是现实情况中为了节 ...
- DataGrid( 数据表格) 组件[9]
本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于Panel(面板).Resizeable(调整大小).LinkButton(按钮).Pageination( ...
- DataGrid( 数据表格) 组件[8]
本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于Panel(面板).Resizeable(调整大小).LinkButton(按钮).Pageination( ...
- DataGrid( 数据表格) 组件[7]
本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于Panel(面板).Resizeable(调整大小).LinkButton(按钮).Pageination( ...
- DataGrid( 数据表格) 组件[6]
本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于Panel(面板).Resizeable(调整大小).LinkButton(按钮).Pageination( ...
- DataGrid( 数据表格) 组件[5]
本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于Panel(面板).Resizeable(调整大小).LinkButton(按钮).Pageination( ...
- DataGrid( 数据表格) 组件[4]
本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于Panel(面板).Resizeable(调整大小).LinkButton(按钮).Pageination( ...
- DataGrid( 数据表格) 组件[3]
本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于Panel(面板).Resizeable(调整大小).LinkButton(按钮).Pageination( ...
随机推荐
- ElasticSearch 学习记录之ES短语匹配基本用法
短语匹配 短语匹配故名思意就是对分词后的短语就是匹配,而不是仅仅对单独的单词进行匹配 下面就是根据下面的脚本例子来看整个短语匹配的有哪些作用和优点 GET /my_index/my_type/_sea ...
- 递归回溯 UVa140 Bandwidth宽带
本题题意:寻找一个排列,在此排序中,带宽的长度最小(带宽是指:任意一点v与其距离最远的且与v有边相连的顶点与v的距离的最大值),若有多个,按照字典序输出最小的哪一个. 解题思路: 方法一:由于题目说结 ...
- mustache.js 使用
对于mustache模板,我是属于即用即查的方法,以下记录仅是我常用的方式.方便以后使用时不用再去项目中去找,因为真的不好找.(此处 -->serious 脸) 当需要渲染一些数据列表的时候,使 ...
- js模拟静态方法
//模拟静态 var Animal = function(name){ this.name = name; Animal.instanceCounter ++; }; Animal.instanceC ...
- Java爬虫--Https绕过证书
https网站服务器都是有证书的. 是由网站自己的服务器签发的,并不被浏览器或操作系统广泛接受. 在使用CloseableHttpClient时经常遇到证书错误(知乎的网站就是这样) 现在需要SSL绕 ...
- 剑指 offer代码解析——面试题39推断平衡二叉树
题目:输入一颗二叉树的根结点.推断该树是不是平衡二叉树. 假设某二叉树中随意结点的左右子树的高度相差不超过1,那么它就是一棵平衡二叉树. 分析:所谓平衡二叉树就是要确保每一个结点的左子树与右子树的高度 ...
- C++教程之autokeyword的使用
一.autokeyword的前世 从C语言開始,autokeyword就被当作是一个变量的存储类型修饰符,表示自己主动变量(局部变量).它不能被单独使用,否则编译器会给出警告. #include &l ...
- SQL运行时间
打开SQL运行时间统计 set timing on; 查询是否有运行时间较长的SQL存在 select a.sid, b.sql_text from v$session a, v$sqlare ...
- A. Arrays(Codeforces Round #317 水题)
A. Arrays time limit per test 2 seconds memory limit per test 256 megabytes input standard input out ...
- Matlab人脸检測方法(Face Parts Detection)具体解释
今天同学让我帮忙制作一个人脸表情识别的样本库,当中主要是对人脸进行裁剪,这里用到了一个相对较新的Matlab人脸检測方法Face Parts Detection.网上百度了一下发现关于Matlab人脸 ...