table component for tinper-bee
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
build 优化过滤样式、滚动条问题 Nov 13, 2018
demo
dist 优化过滤样式、滚动条问题 Nov 13, 2018
docs
src 去掉注释掉的代码 Nov 13, 2018
test 跑通测试 Jan 4, 2018
.gitignore add:添加过滤行功能的清除按钮以及下拉条件的清除. Sep 26, 2018
.npmignore
.travis.yml
CHANGELOG.md
README.md
README_EN.md first commit Dec 26, 2016
index.html
package.json update:同版本安装警告 Nov 14, 2018

README.md

bee-table

npm version Build Status Coverage Status dependencies Status NPM downloads Average time to resolve an issue Percentage of issues still open

react bee-table component for tinper-bee

该table组件除了基本表格功能之外,还提供了一下功能。

  • 动态设置过滤列
  • 排序合计
  • 多选
  • 主子表
  • 固定表头
  • 交互列
  • 列拖拽
  • 嵌套子表格
  • 行、列合并

具体示例代码参考!这里

安装

bee-table

使用方法

const columns = [
  { title: '用户名', dataIndex: 'a', key: 'a', width: 100 },
  { id: '123', title: '性别', dataIndex: 'b', key: 'b', width: 100 },
  { title: '年龄', dataIndex: 'c', key: 'c', width: 200 },
  {
    title: '操作', dataIndex: '', key: 'd', render() {
      return <a href="#">一些操作</a>;
    },
  },
];

const data = [
  { a: '令狐冲', b: '', c: 41, key: '1' },
  { a: '杨过', b: '', c: 67, key: '2' },
  { a: '郭靖', b: '', c: 25, key: '3' },
];

class Demo extends Component {
    render () {
        return (
              <Table
              columns={columns}
              data={data}
              title={currentData => <div>标题: 这是一个标题</div>}
              footer={currentData => <div>表尾: 我是小尾巴</div>}
              />
        )
    }
}

API

Table

参数 说明 类型 默认值
data 传入的表格数据(key值必需,否则会导致部分功能出现问题。建议使用唯一的值,如id) array []
bordered 是否展示外边框和列边框 boolean false
columns 列的配置表,具体配置见下表 array -
defaultExpandAllRows 默认是否展开所有行 bool false
expandedRowKeys 展开的行,控制属性 array -
defaultExpandedRowKeys 初始扩展行键 array []
bodyStyle 添加到tablebody上的style object {}
style 添加到table上的style object {}
rowKey 如果rowKey是字符串,record [rowKey]将被用作键。如果rowKey是function,rowKey(record, index)的返回值将被用作键。 string or Function(record, index):string 'key'
rowClassName 获取行的classname Function(record, index, indent):string () => ''
expandedRowClassName 获取展开行的className Function(recode, index, indent):string () => ''
onExpand 展开行时的钩子函数 Function(expanded, record) () => ''
onExpandedRowsChange 函数在扩展行更改时调用 Function(expandedRows) () => ''
indentSize indentSize为每个级别的data.i.children,更好地使用column.width指定 number 15
onRowClick 行的点击事件钩子函数 Function(record, index, event) () => ''
onRowDoubleClick 行的双击事件钩子函数 Function(record, index, event) () => ''
expandIconAsCell 是否将expandIcon作为单元格 bool false
expandIconColumnIndex expandIcon的索引,当expandIconAsCell为false时,将插入哪个列 number 0
showHeader 是否显示表头 bool true
title 表格标题 Function -
footer 表格尾部 Function -
emptyText 无数据时显示的内容 Function () => 'No Data'
scroll 横向或纵向支持滚动,也可用于指定滚动区域的宽高度:{ x: true, y: 300 } object {}
rowRef 获取行的ref Function(record, index, indent):string () => null
getBodyWrapper 添加对table body的包装 Function(body) body => body
expandedRowRender 额外的展开行 Function(record, index, indent):node -
expandIconAsCell 展开按钮是否单独作为一个单元格 bool false
expandRowByClick 设置展开行是否通过点击行触发,此参数需要与上面参数搭配使用(默认是通过点击行前面的加号展开行 bool false
footerScroll 表尾和body是否公用同一个横向滚动条。( 如果footer中也是一个table组件,并且也具有滚动条,那么也需要加入footerScroll参数。 ) bool false
loading 表格是否加载中 bool object(详情可以参考上面示例)
haveExpandIcon 控制是否显示行展开icon.注:该参数只有在和expandedRowRender同时使用才生效 Function(record, index):bool () =>false
filterable 是否开启根据条件来过滤数据 bool false
filterDelay 触发过滤输入的时候的ms延迟时间 number 300
onFilterRowsChange 触发过滤输入操作以及其他的回调,回车执行函数或者失去焦点触发回调 (key,val) => () () => ()
onFilterRowsDropChange 过滤下拉条件的回调 (key,val)=>() () => ()

注意: data参数中的key值必需,否则会导致部分功能出现问题!建议使用唯一的值,如id

Column

参数 说明 类型 默认值
key 列的键 string -
className 传入列的classname String -
colSpan 该列的colSpan Number -
title 列的标题 node -
dataIndex 显示数据记录的字段 String -
width 宽度的特定比例根据列的宽度计算 String/Number -
fixed 当表水平滚动时,此列将被固定:true或'left'或'right' true/'left'/'right' -
render cell的render函数有三个参数:这个单元格的文本,这行的记录,这行的索引,它返回一个对象:{children:value,props:{colSpan:1,rowSpan:1}} ==>'children'是这个单元格的文本,props是这个单元格的一些设置 -
onCellClick 单击列的单元格时调用 Function(row, event) -
onHeadCellClick 单击表头的单元格时调用 Function(row, event) row 当前行的数据
order 设置排序 string("descend"、"ascend") -
filterType 过滤下拉的类型.可选text,dropdown,date string text
filterDropdown 是否显示过滤下拉.可选show,hide string show
format 针对过滤下拉设置日期类的格式 string YYYY-MM-DD
filterDropdownAuto 设置下拉条件是否自动设置选项,auto自动根据当前数据生成,manual手动传入,可以使用filterDropdownData来传入自定义数据 string auto
filterDropdownData 下拉条件自定义数据,filterDropdownAuto=manual生效,传入格式:[{ key : "自定义", value : "自定义" }] array []
filterDropdownFocus 触发点击下拉条件的回调,一般用于异步点击请求数据使用 function () => ()

如何引用

需要单独的去引用相应的js文件,目录在lib文件夹,示例如下:

  • 在tinper-bee中引用
import {Table} from 'tinper-bee'
  • 单独安装bee-table 方式
import Table from 'bee-table'

multiSelect

全选功能

Table新增参数

参数 说明 类型 默认值
multiSelect 全选功能的配置对象,属性参见下面 obj {}
multiSelect.type 全选功能的类型,多选或单选(暂时只支持多选) string checkbox
multiSelect.param 通过设置该参数来设计获取的数据数组,默认返还所有数据 string ''
getSelectedDataFunc 返回当前选中的数据数组 Function
selectDisabled 设置某一行数据无法被选中,使用类似于rowClassName Function(record, index):bool
selectedRow 设置某一行数据是否被选中,使用类似于rowClassName Function(record, index):bool

sort

排序功能

Column新增参数

参数 说明 类型 默认值
sorter 排序函数,可以自定义 Function
sorterClick 排序钩子函数 Function (coloum,type)

sum

合计功能

Column新增参数

参数 说明 类型 默认值
sumCol 该列设置为合计列,合计行中会显示合计数据 boolean false

filterColumn

过滤表头列示例

dragColumn

拖拽表头交换顺序示例

dragColumn新增参数

参数 说明 类型 默认值
draggable 当前表格可拖拽 boolean false
checkMinSize 当前表格显示最少列数 boolean false

rendertype

在表格中提供了多种rendertype可以供选择,比如下拉框,输入框,日期等

如何引用

需要单独的去引用相应的js文件,目录在render文件夹,示例如下:

import InputRender from "bee-table/render/InputRender.js"

安装依赖包

不同的render会依赖其他组件,因为此类render组件是作为bee-table的插件机制处理的,默认不会去自动下载所依赖的组件,所以在使用之前需要去安装相应的组件。

InputRender

输入框类型render

依赖的组件

该render依赖于bee-icon,bee-form-control,bee-form,bee-tooltip

  1. 下载依赖。例如:npm install bee-icon -S或者npm install bee-icon --save
  2. 引入css文件。**注:如果引入了CSS的cdn资源,即可忽略此步骤。**例如:import 'bee-icon/build/Icon.css;'

配置

参数 说明 类型 默认值
name 该输入框获取数据时的key值,该值不能设置重复且必填 string -
placeholder 输入框的提示信息 string -
value 输入框中的显示值 string
isclickTrigger 是否使用点击触发编辑状态 boolean false
onChange 当值发生改变的时候触发的方法 Function
format 浏览态格式化类型,Currency:货币数字; string
formItemClassName FormItem的class string -
mesClassName 校验错误信息的class string -
isRequire 是否必填 bool false
check 验证的回调函数,参数两个,第一个为校验是否成功true/false 第二个为验证结果对象{name: "", verify: false, value: ""} function -
method 校验方式,change/blur string -
errorMessage 错误提示信息 dom/string "校验失败"
htmlType 数值类型,目前支持 email/tel/IDCard/chinese/password'类型 string -
reg 校验正则,注:设置 htmlType 后 reg 无效 regExp -

DateRender

日期类型render

依赖的组件

该render依赖于bee-icon,bee-datepicker,moment

  1. 下载依赖。例如:npm install bee-icon -S或者npm install bee-icon --save
  2. 引入css文件。**注:如果引入了CSS的cdn资源,即可忽略此步骤。**例如:import 'bee-icon/build/Icon.css;'

配置

参数 说明 类型 默认值
isclickTrigger 是否使用点击触发编辑状态 boolean false
type 控制日期的显示格式,DatePicker、MonthPicker或者WeekPicker,暂时不支持RangePicker string "DatePicker"

注:其他参数参见bee-datepicker组件参数配置

SelectRender

输入框类型render

依赖的组件

该render依赖于bee-icon,bee-select

  1. 下载依赖。例如:npm install bee-icon -S或者npm install bee-icon --save
  2. 引入css文件。**注:如果引入了CSS的cdn资源,即可忽略此步骤。**例如:import 'bee-icon/build/Icon.css;'

配置

参数 说明 类型 默认值
isclickTrigger 是否使用点击触发编辑状态 boolean false
dataSource 数据的键值对,在表格浏览态的时候能显示真实的key值。比如[{key:"张三",value:"01"}] array -

注:其他参数参见bee-select组件参数配置

开发调试

$ git clone https://github.com/tinper-bee/bee-table
$ cd bee-table
$ npm install
$ npm run dev