数据表失败并带有rowspan

Question

我正在使用jQuery DataTables来渲染我的网格数据，并使用rowspan选项的rowspan概念。 它跨越了一些行并且看起来很好但是在某些行之后失败了。

我遵循了这些例子：

• http://live.datatables.net/bodanole/1/edit
• How to add Rowspan in JQuery datatables

$(document).ready(function() {
  var resultArray = [
    ["290013", "TEST OF ENSEMBLE", "11-25-2016", "", "", "22001204", "TEST EP PRODUCT FOR DEVELOPMENT", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
    ["290015", "XXX5", "10-19-2016", "test", "$33.00", "22001204", "TEST EP PRODUCT FOR DEVELOPMENT", "2002", "XXX5", "XXX5", "XXX5", "", "1864", "2017", "VERSION", "23004746", "XXX5", "", "One Time", "", "", "", "", "", "", "21004482", "9189", "Feature Set", "20003880", "XXX5", "XXX5", "BASE", "19-APR-2017", "04-18-2017", "3877", "", ""],
    ["290015", "XXX5", "10-19-2016", "test", "$33.00", "22001204", "TEST EP PRODUCT FOR DEVELOPMENT", "", "", "", "", "", "1865", "Deluxe", "EDITION", "", "", "", "", "", "", "", "", "", "", "", "9190", "Charge", "", "", "", "", "", "", "", "", ""]
  ];

  console.log(JSON.stringify(resultArray));
  var table = $('#example').DataTable({
    columns: [{
      title: 'Item Master Number',
      name: 'ItemMasterNumber'
    }, {
      title: 'Description',
      name: 'Description'
    }, {
      title: 'First Processing Date',
      name: 'FirstProcessingDate'
    }, {
      title: 'Alias',
      name: 'Alias'
    }, {
      title: 'Master Price',
      name: 'MasterPrice'
    }, {
      title: 'Product Id',
      name: 'ProductId'
    }, {
      title: 'Product Description',
      name: 'ProductDescription'
    }, {
      title: 'Feature Set#',
      name: 'FeatureSetId'
    }, {
      title: 'Feature Set Code',
      name: 'FeatureSetCode'
    }, {
      title: 'Feature Set Name',
      name: 'FeatureSetName'
    }, {
      title: 'Feature Set Description',
      name: 'Feature Set Description'
    }, {
      title: 'Enablement Type',
      name: 'Enablement Type'
    }, {
      title: 'Feature Id',
      name: 'FeatureId'
    }, {
      title: 'Attribute Name',
      name: 'AttributeName'
    }, {
      title: 'Attribute Value',
      name: 'AttributeValue'
    }],
    data: resultArray,
    rowsGroup: [
      // Always the array (!) of the column-selectors in specified
      // order to which rows groupping is applied.
      // (column-selector could be any of specified in:
      // https://datatables.net/reference/type/column-selector)
      'ItemMasterNumber:name', 'Description:name', 'FirstProcessingDate:name', 'Alias:name', 'MasterPrice:name',
      'ProductId:name',
      'ProductDescription:name',
      'FeatureSetId:name',
      'FeatureSetCode:name'
    ],
    pageLength: '20',
  });
});

body {
  font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #fff;
}

div.container {
  min-width: 980px;
  margin: 0 auto;
}

/** Hide console */
.as-console-wrapper { display: none !important; }

<title>TODO supply a title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="//cdn.mcfcloud.com/jquery-1.11.2/external/jquery/jquery.js"></script>
<link href="//datatables.net/download/build/nightly/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src="//datatables.net/download/build/nightly/jquery.dataTables.js"></script>
<script src="//cdn.rawgit.com/ashl1/datatables-rowsgroup/v1.0.0/dataTables.rowsGroup.js"></script>

<div class="container">
  <table id="example" class="display" width="100%">
  </table>
</div>

它跨越产品描述列，然后无法跨越。 我希望它跨越功能ID ，功能代码以及许多其他列。

Answer 1

数据表只能对每行的唯一值应用rowspan，如果任何rowspan列具有不同的值，那么它将不起作用，请参阅下面我在项目编号和描述中应用rowspan的片段，最后2行具有公共值（Mapper.Map(newModel, newViewModel); 和290015）所以rowspan工作正常。

＆＃13;

＆＃13;

XXX5

＆＃13;

$(document).ready(function() {
  var resultArray = [
    ["290013", "TEST OF ENSEMBLE", "11-25-2016", "", "", "22001204", "TEST EP PRODUCT FOR DEVELOPMENT", "F1 id", "F1 code", "F1 name", "F1 desc", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
    ["290015", "XXX5", "10-19-2016", "test", "$33.00", "22001204", "TEST EP PRODUCT FOR DEVELOPMENT", "2002", "XXX5 id", "XXX5", "XXX name", "", "1864", "2017", "VERSION", "23004746", "XXX5", "", "One Time", "", "", "", "", "", "", "21004482", "9189", "Feature Set", "20003880", "XXX5", "XXX5", "BASE", "19-APR-2017", "04-18-2017", "3877", "", ""],
    ["290015", "XXX5", "10-19-2016", "test", "$33.00", "22001204", "TEST EP PRODUCT FOR DEVELOPMENT", "CC 1", "Code2", "Name", "Desc", "", "1865", "Deluxe", "EDITION", "", "", "", "", "", "", "", "", "", "", "", "9190", "Charge", "", "", "", "", "", "", "", "", ""]
  ];

  console.log(JSON.stringify(resultArray));
  var table = $('#example').DataTable({
    columns: [{
      title: 'Item Master Number',
      name: 'ItemMasterNumber'
    }, {
      title: 'Description',
      name: 'Description'
    }, {
      title: 'First Processing Date',
      name: 'FirstProcessingDate'
    }, {
      title: 'Alias',
      name: 'Alias'
    }, {
      title: 'Master Price',
      name: 'MasterPrice'
    }, {
      title: 'Product Id',
      name: 'ProductId'
    }, {
      title: 'Product Description',
      name: 'ProductDescription'
    }, {
      title: 'Feature Set#',
      name: 'FeatureSetId'
    }, {
      title: 'Feature Set Code',
      name: 'FeatureSetCode'
    }, {
      title: 'Feature Set Name',
      name: 'FeatureSetName'
    }, {
      title: 'Feature Set Description',
      name: 'Feature Set Description'
    }, {
      title: 'Enablement Type',
      name: 'Enablement Type'
    }, {
      title: 'Feature Id',
      name: 'FeatureId'
    }, {
      title: 'Attribute Name',
      name: 'AttributeName'
    }, {
      title: 'Attribute Value',
      name: 'AttributeValue'
    }],
    data: resultArray,
    rowsGroup: [
      // Always the array (!) of the column-selectors in specified
      // order to which rows groupping is applied.
      // (column-selector could be any of specified in:
      // https://datatables.net/reference/type/column-selector)
      'ItemMasterNumber:name',
      'Description:name'
    ],
    pageLength: '20',
  });
});

＆＃13;

body {
  font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #fff;
}

div.container {
  min-width: 980px;
  margin: 0 auto;
}

/** Hide console */
.as-console-wrapper { display: none !important; }

＆＃13;

＆＃13;

＆＃13;