电子表格 Spreadsheet

issuev1.0.0

/**
 *
 * @title 基础电子表格
 * @description 基础电子表格
 *
 */

import React, { Component } from 'react';
import HotTable from '../../src/index';
class Demo1 extends Component {
    constructor(props) {
        super(props);
        this.data = [
          ['张其', '2019',11 ,'男',90 ],
          ['王收', '2020', 11, '男', 100],
          ['孙武', '2018', 11, '男', 93],
          ['宋佳','2021', 13, '女', 92],
          ['李琦','2021', 15, '女', 99]
        ];
      }
    
      render() {
        return (<HotTable data={this.data}  width="600" height="300" />);
      }
}

/**
 *
 * @title 含有左侧、上层header表头
 * @description 含有左侧、上层header的表头基础电子表格并提供了一下功能
 * 1、排序
 * 2、拖拽列宽
 * 3、列交换
 *
 */

import React, { Component } from "react";
import HotTable from "../../src/index";
const data = [
  { name: "张其", date: "2019-01-11", precent: 0.11, sex: "男", score: 90 },
  { name: "王收", date: "2020-03-21", precent: 0.6, sex: "男", score: 100 },
  { name: "孙武", date: "2018-01-11", precent: 0.9, sex: "女", score: 93 },
  { name: "宋佳", date: "2021-05-11", precent: 0.21, sex: "男", score: 92 },
  { name: "李琦", date: "2021-02-11", precent: 0.32, sex: "女", score: 99 }
];
class Demo2 extends Component {
  constructor(props) {
    super(props);
    this.hotSettings = {
      colHeaders: ["姓名", "日期", "百分比", "性别", "分数"], //列头信息
      columns: [
        //每列信息
        {
          data: "name",
          type: "text",
          width: 40
        },
        {
          data: "date",
          type: "date",
          dateFormat: "YYYY-MM-DD"
        },
        {
          data: "precent",
          type: "numeric",
          numericFormat: {
            pattern: "0.00%"
          }
        },
        {
          data: "sex",
          type: "text"
        },
        {
          data: "score",
          type: "numeric",
          numericFormat: {
            pattern: "0.0"
          }
        }
      ],
      data: data, //当前表数据
      manualColumnMove: true, //列交换
      manualColumnResize: true, //拖拽列宽
      columnSorting: {
        //排序
        indicator: true
      },
    };
    this.hotTableComponent = React.createRef();
  }
  shouldComponentUpdate() {
    return false;
  }
  render() {
    return (
      <HotTable
        ref={this.hotTableComponent}
        settings={this.hotSettings}
        width="600"
        height="300"
      />
    );
  }
}

/**
 *
 * @title 自定义右击菜单、动态设置和获取表格数据
 * @description 自定义右击菜单、动态设置和获取表格数据
 *
 */

import React, { Component } from "react";
import HotTable from "../../src/index";
import Handsontable from "handsontable";
import Button from "bee-button";
class Demo3 extends Component {
  constructor(props) {
    super(props);
    this.hotSettings = {
      data: Handsontable.helper.createSpreadsheetData(5, 5),
      colHeaders: true,
      copyPaste: true,
      // Enables the plugin with custom values
      copyPaste: {
        columnsLimit: 25,
        rowsLimit: 50,
      },
      contextMenu: {
        items: {
          row_above: {
            name: "向上插入一行"
          },
          row_below: {
            name: "向下插入一行"
          },
          separator: Handsontable.plugins.ContextMenu.SEPARATOR,
          clear_custom: {
            name: "删除所有",
            callback: function() {
              this.clear();
            }
          }
        }
      }
    };
    this.hotTableComponent = React.createRef();
  }
  shouldComponentUpdate() {
    return false;
  }
  getData = (row, column, row2, column2) => {
    let data = this.hotTableComponent.current.hotInstance.getData();
    console.log("当前表的所有数据", data);
  };

  loadData = () => {
    this.hotTableComponent.current.hotInstance.loadData([["new", "data"]]);
  };
  render() {
    return (
      <div>
        <Button onClick={this.getData} className={"m-sm"}>
          console所有数据
        </Button>

        <Button onClick={this.loadData} className={"m-sm"}>
          更新数据
        </Button>

        <HotTable
          ref={this.hotTableComponent}
          id="hot"
          settings={this.hotSettings}
        />
      </div>
    );
  }
}