电子表格 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

|参数|说明|类型|默认值| |:--|:---|:--|:--| |id|组件唯一id|string|-| |data|表格数据数据|array|[]| |columns|列的配置表，具体配置见下表|array|[]| |language|表格语言|'zh-CN'或 'en-US'或 'zh-TW'|'zh-CN'| |rowHeaders|表头信息|boolean或 array或 function (index)=>{}|true| |colWidths|列宽|number 100或 string '100px'或 array [100,200]或 func (index)=>{}|-| |rowHeights|列宽|number 100或 string '100px'或 array [100,200]或 func (index)=>{}|-| |width|表格总宽度|'%' 或 'px'|-| |height|表格总高度|'%' 或 'px' 或 'auto'|-| |multiSelect|是否含有多选框|boolean|true| |manualColumnResize|是否列宽可以拖动|boolean|true| |manualColumnMove|是否列可以交换|boolean|false| |manualRowResize|是否行高可以拖动|boolean|false| |manualRowMove|是否行可以交换|boolean|false| |fixedColumnsLeft|列左固定|number|-| |fixedColumnsRight|列右固定|number|-| |fixedRowsBottom|行头固定|number|-| |fixedRowsTop|行头固定|number|-| |manualColumnFreeze|是否开启固定列|boolean|true| |copyPaste|是否可以复制粘贴|boolean|true| |customBorders|是否开启边框设置|boolean|true| |copyable|是否开启键盘复制|boolean|true| |allowInsertColumn|是否开启插入列|boolean|true| |allowInsertRow|是否开启插入行|boolean|true| |multiColumnSorting|是否列可以排序|boolean|true| |dropdownMenu|表上下文下拉菜单|boolean 或 array 见下表 dropdownMenu contextMenu |false| |contextMenu|行上下文下拉菜单|boolean 或 array 见下表 dropdownMenu contextMenu |false| |filters|表头下拉菜单中是否启动过滤器|boolean|false| |stretchH|表宽度不等于所有列宽的计算总和时，列宽设置|'none'或 'all' 或'last'|'none'| |rowStyle|行设置样式|func|-| |activeHeaderClassName|选中列标题样式|strig|-| |columnHeaderHeight|列表头高|number|25| |fixedShadow|是否固定表格阴影|boolean|false| |fixedColumnsLeft|固定表格列|number|-| |fixedRowsTop|是否固定表格顶部|number|-| |fixedRowsBottom|是否固定表格底部|number|-| |nestedHeaders|多表头|array [['a','b']]或者[['a',{label:'b',colspan:2}]] |-| |fillHandle|自动填充设置|boolean 或 string('vertical' or 'horizontal') 或者 object见下表 fillHandle|'vertical'|

dropdownMenu contextMenu

|键|说明|额外条件| |:--|:---|:--| |row_above|在选中行上方插入行|-| |row_below|在选中行下方插入行|-| |col_left|插入列左侧操作|-| |col_right|插入列右侧操作|-| |---------| 分隔器 |-| |remove_row|删除行动作 |-| |remove_col|删除列操作|-| |clear_column|清除列值操作 |-| |undo|撤消操作|undoRedo已开启|-| |redo|重做动作|undoRedo已开启| |make_read_only|进行只读操作|-| |alignment| 对齐操作|-| |cut|剪切操作|copyPaste打开| |copy|复制操作|copyPaste打开| |merge_cells|合并单元格|-| |freeze_column|锁定列操作| manualColumnFreeze已开启| |unfreeze_column|解锁列操作| manualColumnFreeze已开启| |borders|自定义边框操作| customBorders已开启| |allowEmpty|是否日期可以值为空|boolean|true|

Column

|参数|说明|类型|默认值| |:--|:---|:--|:--| |data|列的键,支持'date.xx'|string|-| |type|数据类型 text numeric date time checkbox select dropdown autocomplete password refMultipleTable refTreeWithInput refTreeTableWithInput refTreeTransferWithInput|string|true| |className|样式名|string|-| |readOnly|是否数据仅可读|boolean|false| |readOnlyCellClassName|自定义只读表格样式|string|-| |textTooltip|表格内容超出表格的宽出现 ...|boolean|true| |editor|是否数据可以编辑|boolean|true| |strict|是否输入到单元格的值区分大小写|boolean|false| |placeholder|单元格占位文字|string|-| |tableClassName|表格样式类名|string|-| |dateFormat|日期格式|string|-| |correctFormat|当前日期是否格式化|boolean|true| |defaultDate|默认日期|string|-| |source|数据类型 'autocomplete' 或 'dropdown' 数据源|array func (query,callback)=>{}|''| |numericFormat|数字类型格式化|object|-| |multiColumnSorting|打开多列排序|boolean 或 object|false| |allowInvalid|数据校验失败是否可以操作其他表格|boolean|true| |allowEmpty|是否日期可以值为空|boolean|true| |validator|自定义验证方法|func (value,callback)=>{}|-| |onClick|表格点击事件|func (rowData, rowNum, value)=>{}|-| |dblClick|表格双击事件|func (rowData, rowNum, value)=>{}|-| |onChangeCell|表格值变化事件|func (rowData, rowNum)=>{}|-| |refSource|参照数据回调|func (value, type, callback)=>{} 'type'值为auto tree table|-| |refOnChange|参照选中回调|func (refData, rowData, rowNum)=>{}|-| |refConfig|参照配置|见下表 refConfig|-| |customValue|自定义表格内容渲染,通常用于表格联动|(rowData)=>{}|-| |renderer|自定义表格渲染，支持dom|(instance, td, row, col, prop, value, cellProperties)=>{}|-|

refConfig 更多参考

|参数|说明|类型|默认值| |:--|:---|:--|:--| |columnsKey|获取参照选中对象的值，约定数组第一个为表格回写值|array|['refname','refcode']| |rowKey|拖拽修改值关联key|array|-| |isThreeBar|表格中是否出现三道杠icon|boolean|false| |columnsData|表头数据|array|-| |tableData|表体数据|array|-| |columnsData|表头数据|array|-| |treeData|树参照数据|array|-|

multiColumnSorting

|参数|说明|类型|默认值| |:--|:---|:--|:--| |initialConfig|某些列初始排序状态|object|-| |indicator|是否显示排序顺序指示符(小箭头)|boolean|true| |sortEmptyCells|是否空单元格应该参与排序|boolean|true| |headerAction|是否单击标题应该对表进行排序|boolean|true| |compareFunctionFactory|自定义比较函数|(sortOrder, columnMeta)=>{}|-|

numericFormat

|参数|说明|类型|默认值| |:--|:---|:--|:--| |pattern|数字模式 具体参考|string|-| |culture|货币处理 具体参考|string|-|

fillHandle

|参数|说明|类型|默认值| |:--|:---|:--|:--| |autoInsertRow|填充到最后一行是否自动添加行|boolean|true| |direction|自动填充方向|string 值为vertical horizontal |'vertical'|

csvConfig

|参数|说明|类型|默认值| |:--|:---|:--|:--| |filename|将导出文件名|string|CSV_[YYYY]-[MM]-[DD]| |exportHiddenRows|在导出的文件中包含隐藏的行|boolean|true| |exportHiddenColumns|在导出的文件中包含隐藏列|boolean|true| |columnHeaders|在导出的文件中包含列标题|boolean|true| |rowHeaders|在导出的文件中包含行标题|boolean|true| |columnDelimiter|列分隔符|string|','| |rowDelimiter|行分隔符|string|\r\n| |range|将导出到文件的单元格范围|[]|-| |mimeType|将导出文件类型|string|"text/csv"|

获取表格里的数据

 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