SOURCE

onload = function() {

	// template for "Template" cells
	var theTemplate = '<button class="btn btn-default" name="{country}">' +
      '<img src="http://flagpedia.net/data/flags/mini/{abb}.png"/> ' +
      'Click Me!' +
    '</button>';

	// grid with template
	var theGrid = new wijmo.grid.FlexGrid('#theGrid', {
   	autoGenerateColumns: false,
    selectionMode:'Row',
    columns: [
    	{ binding: 'country', header: 'Country' },
      { binding: 'template', header: 'Template', width: 130, isReadOnly: true },
      { binding: 'sales', header: 'Sales', format: 'n2' },
      { binding: 'expenses', header: 'Expenses', format: 'n2' }
    ],
  	itemsSource: getData(),
    showAlternatingRows: false,
		formatItem: function(s, e) {
    	if (e.panel == s.cells && s.columns[e.col].binding == 'template') {
      	var item = s.rows[e.row].dataItem,
      			html = wijmo.format(theTemplate, item);
  			e.cell.innerHTML = html;
      }
    }
	});
  
  // make rows taller to accommodate buttons
  theGrid.rows.defaultSize = 45;

	// handle button clicks
  theGrid.hostElement.addEventListener('click', function(e) {
  	var target = wijmo.closest(e.target, 'button');
  	if (target instanceof HTMLButtonElement && target.name) {
    	alert('Thanks for clicking "' + target.name + '"');
    }
  });
   theGrid.hostElement.addEventListener('mouseout', function(e) {
  	//var target = wijmo.closest(e.target, 'button');
  	//if (target instanceof HTMLButtonElement && target.name) {
    	//alert('hello');
    //}
  });
	// create some random data
  function getData() {
    var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
        abb = 'us,de,gb,jp,it,gr'.split(','),
        data = [];
		for (var i = 0; i < countries.length; i++) {
    	data.push({
      	country: countries[i],
        abb: abb[i],
        sales: Math.random() * 10000,
        expenses: Math.random() * 5000
			});
		}
    return data;
  }
  document.getElementById('btnCreateDoc').addEventListener('click', function() {

		// create the document
		var doc = new wijmo.pdf.PdfDocument({
    	compress: true, 
      header: { declarative: { text: '\t&[Page]\\&[Pages]' } },
      ended: function (sender, args) {
				wijmo.pdf.saveBlob(args.blob, 'LearnWijmoDoc.pdf');
			}
		});
    
    // add some content
		doc.drawText('This is a FlexGrid');

		// add the grid (400pt wide)
		wijmo.grid.pdf.FlexGridPdfConverter.draw(theGrid, doc, 400);
    
    // finish document
		doc.end();
	});
}

<div class="container">
    
  <h1>
    模板单元格</h1>
  <p>
    您可以使用Wijmo的<b>format</b>功能来实现基本的模板处理机制.</p>
  <p>
    下面的表格处理formatItem事件以使用在标记中定义的模板元素在“模板”列"btnExport" class="btn btn-default">

    <button id="btnCreateDoc" class="btn btn-default">
    创建PDF文档
  </button>
  <div id="theGrid">
  </div>
  
  <div class="panel panel-warning">
    <div class="panel-heading">
      如果您使用Angular，Wijmo的互操作层可以为单元格模板提供广泛的支持。 有关详细信息，
      <a href="http://demos.wijmo.com/5/SampleExplorer/SampleExplorer/Sample/CellTemplateIntro" target="_blank">请参阅CellTemplateIntro示例</a> .
    </div>
  </div>
</div>

.wj-flexgrid {
  max-height: 350px; 
  margin-top:10px;
}
.wj-cell img {
  width: 30px;
}