ac-complex-grid
高级表格
bee-complex-grid 是基于bee-table上封装,将多选、过滤、排序、分页、固定列等多功能基于一身。在使用bee-table实现复杂功能时,需要高级组件嵌套高级组件,使用起来经常有问题。有了bee-complex-grid ,用户仅需要引入Grid即可,大大减少代码量,提供代码质量。
依赖
- react >= 15.3.0
- react-dom >= 15.3.0
- prop-types >= 15.6.0
使用方法
;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' { return <a href="#">一些操作</a>; } ; const data = a: '令狐冲' b: '男' c: 41 key: '1' a: '杨过' b: '男' c: 67 key: '2' a: '郭靖' b: '男' c: 25 key: '3' ; { return <Grid columns=columns data=data /> }
API
table相关API参考这里,下面是Grid扩充的API
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
paginationObj | 表格分页,具体参考分页API | Object | {activePage: 1, total: 0,items:1} |
showHeaderMenu | 是否显示表头菜单(动态设置显示隐藏、锁定解锁) | boolean | true |
multiSelect | 是否含有多选框,multiSelect={false}时为每行不含有Checkbox | Object | {} |
showFilterMenu | 是否显示行过滤菜单 | boolean | false |
columnFilterAble | 是否显示列过滤功能 | boolean | true |
sheetName【excel】 | 设置导出excel 的sheet的名称 | string | -- |
sheetIsRowFilter【excel】 | 是否要设置数据的行高 | boolean | false |
sheetHeader【excel】 | 设置导出excel 的Head的高度 | Object | eg:{{height:30, //设置高度ifshow:false //是否显示}} |
resetColumns | 重置columns | function | this.refs.grid.resetColumns(columns) |
exportData | 要导出的数据源 | array | - |
Column(新增)
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
exportHidden | 是否在导出中隐藏此列 | boolean | false |
exportKey | 单独设置当前列的key[eg:性别 返回字段中 table 使用 id ,而导出中使用 name ] | string | - |
导出excel 使用
{ thisrefsgrid; }
开发调试
$ npm install -g bee-tools$ git clone https://github.com/tinper-bee/bee-complex-grid$ cd bee-complex-grid$ npm install$ npm run dev