概述

本文主要讲述在Wijmo中如何使用Template来自定义FlexGird单元格的内容,包括常用的一些Button, A签,下拉框等。

首先,我们的需求是,某列单元格需要进行按钮操作,某一列单元格需要超链接操作,我们其实ItemFormat中判断也能完成类似的功能,但是使用Template能高效的提高表格的运行速度,以及加载相应的数据。

第一步:定义模板:

   1:      // template for "Template" cells
   2:      var theTemplatebtn = '<button class="btn btn-default" name="{country}">' +
   3:        '<img src="http://flagpedia.net/data/flags/mini/{abb}.png"/> ' +
   4:        'Click Me!' +
   5:      '</button>';
   6:    var theTemplatea = '<a name="{country}">Edit</a>';

 

第二步:绑定模板:

   1:      // grid with template
   2:      var theGrid = new wijmo.grid.FlexGrid('#theGrid', {
   3:         autoGenerateColumns: false,
   4:      columns: [
   5:          { binding: 'country', header: 'Country' },
   6:        { binding: 'templatebtn', header: 'TemplateBtn', width: 130, isReadOnly: true },
   7:        { binding: 'templatea', header: 'TemplateA', width: 130, isReadOnly: true },
   8:        { binding: 'sales', header: 'Sales', format: 'n2' },
   9:        { binding: 'expenses', header: 'Expenses', format: 'n2' }
  10:      ],
  11:        itemsSource: getData(),
  12:      showAlternatingRows: false,
  13:          formatItem: function(s, e) {
  14:          if (e.panel == s.cells && s.columns[e.col].binding == 'templatebtn') {
  15:            var item = s.rows[e.row].dataItem,
  16:                    html = wijmo.format(theTemplatebtn, item);
  17:                e.cell.innerHTML = html;
  18:        }
  19:            if (e.panel == s.cells && s.columns[e.col].binding == 'templatea') {
  20:            var item = s.rows[e.row].dataItem,
  21:                    html = wijmo.format(theTemplatea, item);
  22:                e.cell.innerHTML = html;
  23:        }
  24:      }
  25:      });

第三步:绑定事件

   1:  // handle button clicks
   2:    theGrid.hostElement.addEventListener('click', function(e) {
   3:        var target = wijmo.closest(e.target, 'button');
   4:        if (target instanceof HTMLButtonElement && target.name) {
   5:          alert('Thanks for clicking "' + target.name + '"');
   6:      }
   7:    });
   8:        // handle a clicks
   9:    theGrid.hostElement.addEventListener('click', function(e) {
  10:        var target = wijmo.closest(e.target, 'a');
  11:        if (target instanceof HTMLAnchorElement && target.name) {
  12:          alert('Thanks for edit "' + target.name + '"');
  13:      }
  14:    });

这样我们就完成了FlexGrid如何使用模板来完成自定义单元格的操作。

示例效果如图:

image

demo 地址:

了解Wijmo产品,访问如下链接:

Wijmo产品网站:/developer/wijmojscore

Wijmo中文文档:/developer/wijmojscore

Wijmo中文学习教程:http://demo.grapecity.com.cn/wijmo5/learningwijmo/