2

我正在使用handsontable制作类似excel的表格。我想在我的桌子上合并标题。有可能的？或者有没有其他解决方案？谢谢。

<div id="example1" style="width: 400px; height: 300px; overflow: scroll"></div>

<script>
            function mergeCell(instance, td, row, col, prop, value, cellProperties) {
              Handsontable.TextCell.renderer.apply(this, arguments);
              td.colspan = 2;
            }
            var myData = [
              ["", "1", "2", "3", "4", "5", "6"], 
                //i want to merge this first row using function 'mergeCell'
              ["Year", "d", "n", "d", "n", "d", "n", "d", "n", "d", "n", "d", "n"],
              ["2009", '', -11, 14, 13, 1, 2, 8, 13, -5, 9, 12, 0],
              ["2010", '', 15, -12, 1, -5, '', 12, 3, -1, '', 12, 13],
              ["2008", -5, '', 12, 13, -5, '', 12, 13, -4, '', 10, 3]];

            $("#example1").handsontable({
              data: myData,
              fixedRowsTop: 2,
              fixedColumnsLeft: 1,
              contextMenu: true,
              cells: function (row, col, prop) {
                var cellProperties = {};
                  cellProperties.readOnly = true;                   
            if (col != 0 && row === 0) {
                  cellProperties.renderer = mergeCell; 
                }
                return cellProperties;
              }
            });
</script>
4

2 回答 2

2

我找到了我的问题的答案！如果我们有其他函数，则应该在其他函数之后调用函数 mergeCell。

<div id="example1" style="width: 400px; height: 300px; overflow: scroll"></div>

<script>
            function mergeCell(instance, td, row, col, prop, value, cellProperties) {
              Handsontable.TextCell.renderer.apply(this, arguments);
              //td.colspan = 2; wrong, should be like this :
              td.setAttribute("colSpan", "2");
            }
            var myData = [
              ["", "1", "2", "3", "4", "5", "6", "", "", ""], 
                //i dont know why i should have this extra columns
              ["Year", "d", "n", "d", "n", "d", "n", "d", "n", "d", "n", "d", "n"],
              ["2009", '', -11, 14, 13, 1, 2, 8, 13, -5, 9, 12, 0],
              ["2010", '', 15, -12, 1, -5, '', 12, 3, -1, '', 12, 13],
              ["2008", -5, '', 12, 13, -5, '', 12, 13, -4, '', 10, 3]];

            $("#example1").handsontable({
              data: myData,
              fixedRowsTop: 2,
              fixedColumnsLeft: 1,
              contextMenu: true,
              cells: function (row, col, prop) {
                var cellProperties = {};
                  cellProperties.readOnly = true;                   
            if (col != 0 && row === 0) {
                  cellProperties.renderer = mergeCell; 
                }
                return cellProperties;
              }
            });
</script>

编辑 此脚本加载错误的数据。最后，我取消了合并标题单元格。

于 2013-07-24T03:07:52.070 回答
1

万一有人碰巧在这里跑过，我分叉了一个不工作的小提琴并更新了它，这样它就可以演示一个带有 colspan 或合并单元格的工作handsontable。

http://jsfiddle.net/9b93zdf6/2/

$(document).ready(function () {

// Quick and dirty model for name and address.    
function model(first, last, street, state, zip) {
    return {
        name: { first: first, last: last },
        address: { street: street, state: state, zip: zip }
    };
}

var $container = $("#example");
$container.handsontable({
    data: [
        model('Chico', 'Marx', '513 Broadway', 'New York', '10013'),
        model('Harpo', 'Marx', '3913 Michigan Ave', 'Chicago', '40123'),
        model('Groucho', 'Marx', '334 Park Place', 'Atlantic City', '31513'),
        model( 'Zeppo', 'Marx', '3135 Sunset Blvd', 'Los Angeles', '14123')
    ],
    dataSchema: model,
    startRows: 4,
    startCols: 5,
    colHeaders: ['First', 'Last', 'Street', 'State', 'Zip'],
    rowaHeaders: false,
    manualColumnResize: true,
    columns: [
        {data: 'name.first'},
        {data: 'name.last'},
        {data: 'address.street'},
        {data: 'address.state'},
        {data: 'address.zip'}
    ],
    afterRender: function () {
         $container.find('thead').find('tr').before(
             '<tr id="header-grouping"><th colspan="2">Name</th>' + 
             '<th colspan="3">Address</th></tr>');
    },
    beforeRender: function() {
        $('#header-grouping').remove();
    }, 
    modifyColWidth: function () {
       //$('#header-grouping').remove();
    }
  });

});

快乐编码

于 2018-04-04T17:50:22.437 回答