高级表格
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build
demo
dist
docs
src
test
.DS_Store
.gitignore
.npmignore
.travis.yml
CHANGELOG.md
HISTORY.md
README.md
README_EN.md
index.html
package-lock.json
package.json

README.md

bee-complex-grid

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

高级表格

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

使用方法

import Grid from "bee-complex-grid";
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 (
              <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 使用

  exportExcel=()=>{
    this.refs.grid.exportExcel();
  }

  

开发调试

$ npm install -g bee-tools
$ git clone https://github.com/tinper-bee/bee-complex-grid
$ cd bee-complex-grid
$ npm install
$ npm run dev