ac-hand-table v0.2.1

电子表格 HandTable

ac-hand-table 是基于 handsontable 的适用于 React 框架的电子表格，它提供了数据绑定、数据验证、行过滤、列排序、表格多选、表格样式、表头交互、表头拖拽、行高拖拽、行交换等操作

如何使用

使用 npm 安装最新版本

$ npm install ac-hand-table  --save

引入
import AcHandTable from 'ac-hand-table';
样式
import 'ac-hand-table/dist/index.css';

代码演示

API

AcHandTable

dropdownMenu contextMenu

Column

refConfig 更多参考

multiColumnSorting

numericFormat

fillHandle

csvConfig

获取表格里的数据

 getData = () => {
    // 获取数据
    this.child.getData((data) => {
      console.log('data', data);
    });
  };

表格添加行

  onInsertRowData = () => {
    // onInsertRowData(number,source)
    // number 插入行的位置，0 为行首，-1 为行尾
    // source 插入的行对象，
    this.child.onInsertRowData(); // 默认行首，空对象
  };

删除多选选中的行

 onDelRowCheck = () => {
     this.child.onDelRowCheck();
  };

获取验证通过后数据

  getData = (callback) => {
    this.child.getData((data) => {
      console.log('data', data);
    });
  };

获取多选选中的数据

 getCheckData = () => {
     const checkboxData = this.child.getCheckbox();
     console.log('checkboxData', checkboxData);
 };

获取被修改后的数据

  getUpdateData = () => {
    const updateData = this.child.getUpdateData();
    console.log('updateData', updateData);
  };

获取被格式化的数据

  getFormatData = () => {
    const formatData = this.child.getFormatData();
    console.log('formatData', formatData);
  };

获取新增加的数据

  getAddRowData = () => {
    const addRowDate = this.child.getAddRowData();
    console.log('addRowDate', addRowDate);
  };

获取删除的数据

  getDelRowData = () => {
    const delRowData = this.child.getDelRowData();
    console.log('delRowData', delRowData);
  };

获取通过鼠标选中的行

  getSelectData = () => {
   // rowList 鼠标选中的行数据
   // indexList 鼠标选中行数据的下标
    const {rowList,indexList} = this.child.getSelectData();
    console.log('selectData',rowList,indexList);
  };

删除通过鼠标选中的行

  onDelRowSelect = () => {
     // rowList 删除的行数据
     //  indexList 删除行数据的下标
    const {rowList,indexList} = this.child.onDelRowSelect();
    console.log('rowList,indexList', rowList,indexList);
  };

导出csv

  onDownCsv = () => {
    this.child.onExportCSV();
  };

导出模板

onExportHeader = () => {
  this.child.onExportHeader();
};

动态更新设置

 this.child.updateSettings({
      readOnly: false,
});

日期国际化

i18n: {
      previousMonth: 'Previous Month',
      nextMonth: 'Next Month',
      months: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
      weekdays: ['日', '一', '二', '三', '四', '五', '六'],
      weekdaysShort: ['日', '一', '二', '三', '四', '五', '六']
      },

开发调试

$ npm install -g bee-tools
$ git clone https://github.com/tinper-acs/ac-hand-table
$ cd ac-hand-table
$ npm install
$ npm run dev