码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2018-01-08 16:40:27      阅读:205      评论:0      收藏:0      [点我收藏+]

标签:服务端   选择器   选项   自定义查询   图片   ast   strong   type   ota   

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

标签:服务端   选择器   选项   自定义查询   图片   ast   strong   type   ota   

原文地址:https://www.cnblogs.com/liuyh/p/8242857.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!