jQuery Handsontable

<script src="js/handsontableDt.js"></script>

<div class="ecform height100" id="Others" readonly="readonly">
</div>

         function refreshUIOnDataRetrieved (dataObject) {
            var columns = [

                    { data: 'CategoryName', type: 'text', readOnly: true },
                    { data: 'Tag', type: 'text', readOnly: true },
                    { data: 'Value', type: 'numeric', format: '0.00000',readOnly:true},
            ];

            var nestedHeaders = ['能源品种', '用途',  '单价'];
            nestedHeaders = [nestedHeaders];

            if (hot) {
                hot.destroy();
                hot = null;
            }
            var hotElement = document.querySelector("#Others");
            hot = new Handsontable(hotElement, {
                data: dataObject,
                columns: columns,
                stretchH: 'all',
                width: '100%',
                autoWrapRow: true,
                height: '100%',
                maxRows: 500,
                contextMenu: true,
                formulas: true,
                columnSummary: [],
                nestedHeaders: nestedHeaders,
                collapsibleColumns: false,
                hiddenColumns: true,
                rowHeaders: true,//序号
                //  filters: true,
                mergeCells: true,
            });
            c.HandsontableInstance = hot;
        }

官方实例：

var data = getData();
var rowsCount = data.length;

var hot = Handsontable(document.getElementById('example'), {
  data: data,
  height: 456,
  colWidths: 105,
  minCols: 26,
  minRows: 500,
  rowHeaders: true,
  colHeaders: [
    'Task',
    'Owner',
    'Team',
    'Status',
    'Start date',
    'End date',
    'At risk',
    '% complete'
  ],
  columnSorting: true,
  filters: true,
  dropdownMenu: true,
  contextMenu: true,
  autoRowSize: true,
  manualColumnMove: true,
  manualRowMove: true,
  fillHandle: {
    autoInsertRow: false,
  },
  cells: function(row, column) {
    var cellMeta = {};

    if (row >= rowsCount) {
      return cellMeta;
    }

    if (column === 1) {
      cellMeta.type = 'dropdown';
      cellMeta.source = [
        'Ben',
        'Chris',
        'Jessica',
        'Kate',
        'Michael',
        'Monica',
        'Omar',
        'Paul',
        'Samuel',
      ];

    } else if (column === 2) {
      cellMeta.readOnly = true;
      cellMeta.type = 'text';
      cellMeta.renderer = function(hotInstance, TD, row, col, prop, value) {
        var colors = {
          Red: '#e87677',
          Green: '#66e100',
          Blue: '#00a7fe',
          Purple: '#6623e2',
          Orange: '#ffad24',
          Yellow: '#ffe300',
        };

        TD.style.color = colors[value];
        TD.textContent = value;
      };

    } else if (column === 3) {
      cellMeta.type = 'dropdown';
      cellMeta.source = [
        'New',
        'Accepted',
        'Rejected',
        'In progress',
        'Completed',
      ];

    } else if (column === 4 || column === 5) {
      cellMeta.type = 'date';
      cellMeta.dateFormat = 'DD/MM/YYYY';

    } else if (column === 6) {
      var isChecked = this.instance.getDataAtCell(this.instance.toVisualRow(row), column);

      cellMeta.type = 'checkbox';
      cellMeta.className = 'htCenter' + (isChecked ? ' at-risk-checked' : '');

    } else if (column === 7) {
      cellMeta.width = 110;
      cellMeta.renderer = function(hotInstance, TD, row, col, prop, value, cellProperties) {
        var progressBar = document.createElement('progress');

        value = parseInt(value, 10);

        progressBar.max = 100;
        progressBar.value = isNaN(value) ? 0 : value;

        TD.textContent = '';
        TD.appendChild(progressBar);
      };
    }

    return cellMeta;
  },
  // Create virtual column data ("Team" column)
  modifyData: function(row, column, valueHolder, ioMode) {
    if (this.toPhysicalColumn(column) === 2 && ioMode === 'get') {
      valueHolder.value = getOwnerTeam(this.getDataAtCell(this.toVisualRow(row), this.toVisualColumn(1)));
    }
  }
});

function getOwnerTeam(owner) {
  var teamOwners = {
    Red: ['Michael', 'Ben'],
    Green: ['Omar', 'Samuel'],
    Blue: ['Kate', 'Monica'],
    Purple: ['Chris'],
    Orange: ['Paul'],
    Yellow: ['Jessica'],
  };

  return Object.keys(teamOwners).reduce(function(acc, team) {
    return teamOwners[team].indexOf(owner) !== -1 ? team : acc;
  }, null);
}