bee-complex-grid-mhead

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