zoukankan      html  css  js  c++  java
  • 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;
        }
      })
    

      

      

      

     

      

  • 相关阅读:
    python基础教程学习笔记十五
    使用win32imageinstall安装ubuntu
    python基础教程学习笔记十四
    python基础教程学习笔记十二
    ztpto图片轮播
    jQuery 获取屏幕高度、宽度
    h5新属性,可编辑的段落 contenteditable=“true”
    奋斗的奴隶博客中的牛逼js小测试
    ps4将图片弄成透明图片
    图片轮播,纯js+css
  • 原文地址:https://www.cnblogs.com/wang-jing/p/4658658.html
Copyright © 2011-2022 走看看