handsontable-cell type

在单元格中呈现自定义的元素：不能使用html元素

var
    data = [
      {
        title: "<a href='http://www.amazon.com/Professional-JavaScript-Developers-Nicholas-Zakas/dp/1118026691'>Professional JavaScript for Web Developers</a>",
        description: "This <a href='http://bit.ly/sM1bDf'>book</a> provides a developer-level introduction along with more advanced and useful features of <b>JavaScript</b>.",
　　　　 //'★★★★&#x2606'
        comments: "I would rate it ★★★★☆",
        cover: "http://ecx.images-amazon.com/images/I/51bRhyVTVGL._SL50_.jpg"
      },
      {
        title: "<a href='http://shop.oreilly.com/product/9780596517748.do'>JavaScript: The Good Parts</a>",
        description: "This book provides a developer-level introduction along with <b>more advanced</b> and useful features of JavaScript.",
        comments: "This is the book about JavaScript",
        cover: "http://ecx.images-amazon.com/images/I/51gdVAEfPUL._SL50_.jpg"
      },
      {
        title: "<a href='http://shop.oreilly.com/product/9780596805531.do'>JavaScript: The Definitive Guide</a>",
        description: "<em>JavaScript: The Definitive Guide</em> provides a thorough description of the core <b>JavaScript</b> language and both the legacy and standard DOMs implemented in web browsers.",
        comments: "I've never actually read it, but the <a href='http://shop.oreilly.com/product/9780596805531.do'>comments</a> are highly <strong>positive</strong>.",
        cover: "http://ecx.images-amazon.com/images/I/51VFNL4T7kL._SL50_.jpg"
      }
    ],
    container1,
    hot1;

  container1 = document.getElementById('example1');
  hot1 = new Handsontable(container1, {
    data: data,
    colWidths: [200, 200, 200, 80],
    colHeaders: ["Title", "Description", "Comments", "Cover"],
    columns: [
      {data: "title", renderer: "html"},
      {data: "description", renderer: "html"},
      {data: "comments", renderer: safeHtmlRenderer},
      {data: "cover", renderer: coverRenderer}
    ]
  });

  // original by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
　// 只允许input中包含allowed中指定的标签
  function strip_tags(input, allowed) {
    var tags = /<\/?([a-z][a-z0-9]*)\b[^>]*>/gi,
      commentsAndPhpTags = /<!--[\s\S]*?-->|<\?(?:php)?[\s\S]*?\?>/gi;

    // making sure the allowed arg is a string containing only tags in lowercase (<a><b><c>)
    allowed = (((allowed || "") + "").toLowerCase().match(/<[a-z][a-z0-9]*>/g) || []).join('');

    return input.replace(commentsAndPhpTags, '').replace(tags, function ($0, $1) {
      return allowed.indexOf('<' + $1.toLowerCase() + '>') > -1 ? $0 : '';
    });
  }

  function safeHtmlRenderer(instance, td, row, col, prop, value, cellProperties) {
　　//这种方法我还没有用过
    var escaped = Handsontable.helper.stringify(value);
    escaped = strip_tags(escaped, '<em><b><strong><a><big>'); //be sure you only allow certain HTML tags to avoid XSS threats (you should also remove unwanted HTML attributes)
    td.innerHTML = escaped;

    return td;
  }

  function coverRenderer (instance, td, row, col, prop, value, cellProperties) {
    var escaped = Handsontable.helper.stringify(value),
      img;

    if (escaped.indexOf('http') === 0) {
      img = document.createElement('IMG');
      img.src = value;

      Handsontable.Dom.addEvent(img, 'mousedown', function (e){
　　　　 //防止出现异常情况
        e.preventDefault(); // prevent selection quirk
      });

      Handsontable.Dom.empty(td);
      td.appendChild(img);
    }
    else {
      // render as text
　　　 //如果不是http开头的话，当前的renderer就是用textrenderer
      Handsontable.renderers.TextRenderer.apply(this, arguments);
    }

    return td;
  }

thead中呈现自定义元素：呈现自定义元素，都是通过renderer函数

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

  hot2 = new Handsontable(container2, {
    columns: [
      {},
      {renderer: customRenderer}
    ],
    colHeaders: function (col) {
      var txt;

      switch (col) {
        case 0:
          return '<b>Bold</b> and <em>Beautiful</em>';

        case 1:
          txt = "Some <input type='checkbox' class='checker' ";
          txt += isChecked ? 'checked="checked"' : '';
          txt += "> checkbox";

          return txt;
      }
    }
  });

  function customRenderer(instance, td) {
    Handsontable.renderers.TextRenderer.apply(this, arguments);

    if (isChecked) {
      td.style.backgroundColor = 'yellow';
    }
    else {
      td.style.backgroundColor = 'white';
    }

    return td;
  }

  Handsontable.Dom.addEvent(container2, 'mousedown', function (event) {
    if (event.target.nodeName == 'INPUT' && event.target.className == 'checker') {
　　　 //阻止事件传播
      event.stopPropagation();
    }
  });

  Handsontable.Dom.addEvent(container2, 'mouseup', function (event) {
    if (event.target.nodeName == 'INPUT' && event.target.className == 'checker') {
      isChecked = !event.target.checked;
　　　 //调用customRenderer
      hot2.render();
    }
  });

在thead中，通过下拉菜单，改变单元格的类型

cell type numeric：使用Numeral.js来进行格式化

cell type date：需要引入pikaday.js, pikaday.css, moment.js; 默认的格式是DD/MM/YYYY, 设置dateFormat和correctFormat之后，会改变

{
	type: 'date',
	dateFormat: 'MM/DD/YYYY',
	correctFormat: true,
	defaultDate: '01/01/1900'
},

checkbox：只有两个值（默认为true，false）的话，可以使用checkbox；如果想使用其他值的话

 {
        data: "comesInBlack",
        type: "checkbox",
        checkedTemplate: 'yes',
        uncheckedTemplate: 'no'
}

select：双击之后，才会出现下拉菜单

{
        editor: 'select',
        selectOptions: ['Kia', 'Nissan', 'Toyota', 'Honda']
},

dropdown：不用双击，就能看到下拉菜单；跟autocomplete很像

{
        type: 'dropdown',
        source: ['yellow', 'red', 'orange', 'green', 'blue', 'gray', 'black', 'white']
},
//type:'dropdown' 相当于 type:'autocomplete', strict:true, filter:false

autocomplete：可以选择， 可以编辑

{
        type: 'autocomplete',
        source: ['BMW', 'Chrysler', 'Nissan', 'Suzuki', 'Toyota', 'Volvo'],
        strict: false
},
//默认是lazy mode

strict

ajax

password：hashLenght：10：黑点相同，都有10个

handsontable