bee-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

使用方法

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={{type:"radio"}}时为单选表格，multiSelect={{type:"checkbox"}}时为多选表格，传其他值时均为普通表格|Object|{type:"checkbox"}| |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