handsontable: 不错的excel style table plugin

访问量: 3463

refer  to http://www.sitepoint.com/7-jquery-microsoft-excel-type-plugins/

注意： 直接 wget js, 然后使用asset 引用。 不要用： rails plugin:  https://github.com/mahinder/rails_handsontable   否则会raility 版本错误，在rails4下面。 

注意2: 不要使用 jQuery('#dom_id'), 而是使用 document.getElementById('dom_id')  

是非常好用的excel style table plugin. 

Basic initialization

Basic initialization

If you bundled all together, then it’s time to play with Handsontable a bit. Start by creating a container holding the grid:

<div id="example"></div>

Then pass a reference to that div and load some data if you wish:


var data = [
["", "Ford", "Volvo", "Toyota", "Honda"],
["2014", 10, 11, 12, 13],
["2015", 20, 11, 14, 13],
["2016", 30, 15, 12, 13]
];

var container = document.getElementById('example');
var hot = new Handsontable(container, {
data: data,
minSpareRows: 1,
rowHeaders: true,
colHeaders: true,
contextMenu: true
});

把某个cell 设置为无法编辑：

Introduction to cell options

Any constructor or column option may be overwritten for a particular cell (row/column combination), using cell array passed to the Handsontable constructor. Example:

var hot = new Handsontable(document.getElementById('example'), {
  cell: [
    {row: 0, col: 0, readOnly: true}
  ]
});
Or using cells function property to the Handsontable constructor. Example:

var hot = new Handsontable(document.getElementById('example'), {
  cells: function (row, col, prop) {
    var cellProperties = {}

    if (row === 0 && col === 0) {
      cellProperties.readOnly = true;
    }

    return cellProperties;
  }
})

订阅/RSS Feed

Subscribe