handsontable-cell features

数据验证：在columns中设置validator，进行同步或异步验证，还可添加beforeValidate, afterValidate函数，allowInvalid：true可以不用验证

var people = [
      {id: 1, name: {first: 'Joe', last: 'Fabiano'}, ip: '0.0.0.1', email: 'Joe.Fabiano@ex.com'},
      {id: 2, name: {first: 'Fred', last: 'Wecler'}, ip: '0.0.0.1', email: 'Fred.Wecler@ex.com'},
      {id: 3, name: {first: 'Steve', last: 'Wilson'}, ip: '0.0.0.1', email: 'Steve.Wilson@ex.com'},
      {id: 4, name: {first: 'Maria', last: 'Fernandez'}, ip: '0.0.0.1', email: 'M.Fernandez@ex.com'},
      {id: 5, name: {first: 'Pierre', last: 'Barbault'}, ip: '0.0.0.1', email: 'Pierre.Barbault@ex.com'},
      {id: 6, name: {first: 'Nancy', last: 'Moore'}, ip: '0.0.0.1', email: 'Nancy.Moore@ex.com'},
      {id: 7, name: {first: 'Barbara', last: 'MacDonald'}, ip: '0.0.0.1', email: 'B.MacDonald@ex.com'},
      {id: 8, name: {first: 'Wilma', last: 'Williams'}, ip: '0.0.0.1', email: 'Wilma.Williams@ex.com'},
      {id: 9, name: {first: 'Sasha', last: 'Silver'}, ip: '0.0.0.1', email: 'Sasha.Silver@ex.com'},
      {id: 10, name: {first: 'Don', last: 'Pérignon'}, ip: '0.0.0.1', email: 'Don.Pérignon@ex.com'},
      {id: 11, name: {first: 'Aaron', last: 'Kinley'}, ip: '0.0.0.1', email: 'Aaron.Kinley@ex.com'}
    ],
    example1 = document.getElementById('example1'),
    example1console = document.getElementById('example1console'),
    settings1,
    ipValidatorRegexp,
    emailValidator;

  ipValidatorRegexp = /^(?:(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?).){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)|null)$/;
  emailValidator = function (value, callback) {
    setTimeout(function(){
　　　 //还能这样验证
      if (/.+@.+/.test(value)) {
        callback(true);
      }
      else {
        callback(false);
      }
    }, 1000);
  };

  settings1 = {
    data: people,
　　//hooks
    beforeChange: function (changes, source) {
　　　 //changes是数组，数组的元素也是数组，包含四个属性0:10,1：'name.last',2:'Kinley',3:'foo'
      for (var i = changes.length - 1; i >= 0; i--) {
        // gently don't accept the word "foo" (remove the change at index i)
　　　　 //如果想改为foo，会把这次修改删掉
        if (changes[i][3] === 'foo') {
          changes.splice(i, 1);
        }
        // if any of pasted cells contains the word "nuke", reject the whole paste
　　　　 //如果想改为nuke，只是拒绝，而不会删除此次修改
        else if (changes[i][3] === 'nuke') {
          return false;
        }
        // capitalise first letter in column 1 and 2
        else if ((changes[i][1] === 'name.first' || changes[i][1] === 'name.last') && changes[i][3].charAt(0)) {
          changes[i][3] = changes[i][3].charAt(0).toUpperCase() + changes[i][3].slice(1);
        }
      }
    },
    afterChange: function (changes, source) {
      if (source !== 'loadData') {
        example1console.innerText = JSON.stringify(changes);
      }
    },
    colHeaders: ['ID', 'First name', 'Last name', 'IP', 'E-mail'],
    columns: [
      {data: 'id', type: 'numeric'},
      {data: 'name.first'},
      {data: 'name.last'},
　　　 //给ip加事件处理程序，可以不通过验证
      {data: 'ip', validator: ipValidatorRegexp, allowInvalid: true},
      {data: 'email', validator: emailValidator, allowInvalid: false}
    ]
  };
  var hot = new Handsontable(example1, settings1);

往下拖

var
    data = [
      ['', 'Kia', 'Nissan', 'Toyota', 'Honda'],
      ['2012', 10, 11, 12, 13],
      ['2013', 20, 11, 14, 13],
      ['2014', 30, 15, 12, 13],
      ['2015', '', '', '', ''],
      ['2016', '', '', '', '']
    ],
    container = document.getElementById('example1'),
    hot1;

  hot1 = new Handsontable(container, {
    rowHeaders: true,
    colHeaders: true,
    //默认为true，如果为"horizontal"，则只能水平拖动
    fillHandle: true // possible values: true, false, "horizontal", "vertical"
  });
  hot1.loadData(data);

合并单元格

var
    container = document.getElementById('example1'),
    hot;

  hot = new Handsontable(container, {
    data: Handsontable.helper.createSpreadsheetData(100, 18),
    colWidths: [47, 47, 47, 47, 47, 47, 47, 47, 47, 47, 47, 47, 47, 47, 47, 47],
    rowHeaders: true,
    colHeaders: true,
    contextMenu: true,
    //使用mergeCells提供合并单元格的细节
    mergeCells: [
      {row: 1, col: 1, rowspan: 3, colspan: 3},
      {row: 3, col: 4, rowspan: 2, colspan: 2},
      {row: 5, col: 6, rowspan: 3, colspan: 3}
    ]
  });

布局：在cell中设置位置；水平方向：htLeft, htCenter, htRight, htJustify；垂直方向：htTop, htMiddle, htBottom

  var
    container = document.getElementById('example1'),
    hot1;

  hot1 = new Handsontable(container, {
    data: Handsontable.helper.createSpreadsheetData(100, 18),
    colWidths: [47, 47, 47, 47, 47, 47, 47, 47, 47, 47, 47, 47, 47, 47, 47, 47],
    rowHeaders: true,
    colHeaders: true,
    contextMenu: true,
    mergeCells: [
      {row: 1, col: 1, rowspan: 3, colspan: 3},
      {row: 3, col: 4, rowspan: 2, colspan: 2}
    ],
    //预定义了很多类
    className: "htCenter",
    cell: [
      {row: 0, col: 0, className: "htRight"},
      {row: 1, col: 1, className: "htLeft htMiddle"},
      {row: 3, col: 4, className: "htLeft htBottom"}
    ],
    //在这个hooks中，可以捕获到布局的改变
    afterSetCellMeta: function (row, col, key, val) {
      console.log("cell meta changed", row, col, key, val);
    }
  });

列和单元格的只读属性

var
    container1 = document.getElementById('example1'),
    hot1;

  hot1 = new Handsontable(container1, {
    data: getCarData(),
    colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],
    columns: [
      {
        data: 'car',
　　　　 //列只读
        readOnly: true
      },
      {
        data: 'year'
      },
      {
        data: 'chassis'
      },
      {
        data: 'bumper'
      }
    ]
  });

//单元格只读
var
    container2 = document.getElementById('example2'),
    hot2;

  hot2 = new Handsontable(container2, {
    data: getCarData(),
    colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color']

  });
  hot2.updateSettings({
    cells: function (row, col, prop) {
      var cellProperties = {};

      if (hot2.getData()[row][prop] === 'Nissan') {
        cellProperties.readOnly = true;
      }

      return cellProperties;
    }
  })

列和单元格不可编辑：non-edit cell仍然可以拖动填充，复制粘贴，只是不能编辑；只读属性：不能做任何操作

var
    container1 = document.getElementById('example1'),
    hot1;

  hot1 = new Handsontable(container1, {
    data: getCarData(),
    colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],
    columns: [
      {
        data: 'car',
        editor: false
      },
      {
        data: 'year',
        editor: 'numeric'
      },
      {
        data: 'chassis',
        editor: 'text'
      },
      {
        data: 'bumper',
        editor: 'text'
      }
    ]
  });

var
    container2 = document.getElementById('example2'),
    hot2;

  hot2 = new Handsontable(container2, {
    data: getCarData(),
    colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color']
  });
  hot2.updateSettings({
    cells: function (row, col, prop) {
      var cellProperties = {};

      if (hot2.getData()[row][prop] === 'Nissan') {
        cellProperties.editor = false;
      } else {
        cellProperties.editor = 'text';
      }

      return cellProperties;
    }
  })