4

DataTables jquery プラグインを使用しています

colspan を持つ複数行のテーブル ヘッダーを持つ DataTable があります。何かのようなもの：

<thead>
  <tr>
    <th>Level 1</th>
    <th colspan='2'>Level 1 - Item 1</th>
    <th colspan='2'>Level 1 - Item 2</th>
  </tr>
  <tr>
    <th>Level 2</th>
    <th>Level 2 - Item 1a</th>
    <th>Level 2 - Item 1b</th>
    <th>Level 2 - Item 2a</th>
    <th>Level 2 - Item 2b</th>
  </tr>
</thead>

ただし、TableTools プラグインを使用してエクスポートすると、「印刷」オプションを除いて、残りのすべて (Excel、CSV、Pdf など) には「レベル 2」ヘッダー行しかなく、レベル 1 はありません。

レベル 1 もエクスポートする方法について何か提案はありますか?

4

4 に答える 4

2

level1 も Excel にエクスポートする場合は、別の方法があります。

次のように、rowspan/colspan を空のセルに置き換えます。

   <thead>
      <tr>
        <th>Level 1</th>
        <th>Level 1 - Item 1</th>
        <th></th>
        <th>Level 1 - Item 2</th>
        <th></th>
      </tr>
      <tr>
        <th>Level 2</th>
        <th>Level 2 - Item 1a</th>
        <th>Level 2 - Item 1b</th>
        <th>Level 2 - Item 2a</th>
        <th>Level 2 - Item 2b</th>
      </tr>
    </thead>

次に、@misiu上記で提案されているように、TableTools.js を編集します。
見つけ_fnGetDataTablesDataて、その中でこれを変更します：

if (oConfig.bHeader) { ... }

これを次のように:

if (oConfig.bHeader) {
    //another loop
    for (i = 0, rowCount = dt.nTHead.rows.length; i < rowCount; i++) {
        aRow = []; //clear row data
        for (j = 0, iLen = dt.aoColumns.length; j < iLen; j++) {
            if (aColumnsInc[j] && dt.nTHead.rows[i].children[j] !== null) {
                sLoopData = dt.nTHead.rows[i].children[j].innerHTML.replace(/\n/g, " ")
                    .replace(/<.*?>/g, "")
                    .replace(/^\s+|\s+$/g, "");
                sLoopData = this._fnHtmlDecode(sLoopData);
                aRow.push(this._fnBoundData(sLoopData, oConfig.sFieldBoundary, regex));
            } else {
                aRow.push(this._fnBoundData("", oConfig.sFieldBoundary, regex)); //I'm not shure of this!!
            }
        }
        aData.push(aRow.join(oConfig.sFieldSeperator));
    }
}

これにより、複雑なヘッダーが csv/excel にコピー/エクスポートされます。ただし、空のテーブル セルは Excel では空のままであり、結合されません。それらを手動でマージできます。

理想的な解決策ではありませんが、これは今のところ私にとっては完璧に機能しました。

于 2013-02-11T13:33:52.427 に答える
1

TableTools.js を編集します。
見つけ_fnGetDataTablesDataて、その中でこれを変更します：

if (oConfig.bHeader) {
    aRow = [];

    for (i = 0, iLen = dt.aoColumns.length; i < iLen; i++) {
        if (aColumnsInc[i]) {
            sLoopData = dt.aoColumns[i].sTitle.replace(/\n/g, " ")
                .replace(/<.*?>/g, "")
                .replace(/^\s+|\s+$/g, "");
            sLoopData = this._fnHtmlDecode(sLoopData);

            aRow.push(this._fnBoundData(sLoopData, oConfig.sFieldBoundary, regex));
        }
    }

    aData.push(aRow.join(oConfig.sFieldSeperator));
}

これに：

if (oConfig.bHeader) {

    //another loop
    for (i = 0, rowCount = dt.nTHead.rows.length; i < rowCount; i++) {
        aRow = []; //clear row data
        for (j = 0, iLen = dt.aoColumns.length; j < iLen; j++) {
            if (aColumnsInc[j] && dt.nTHead.rows[i].children[j] !== null) {
                sLoopData = dt.nTHead.rows[i].children[j].innerHTML.replace(/\n/g, " ")
                    .replace(/<.*?>/g, "")
                    .replace(/^\s+|\s+$/g, "");
                sLoopData = this._fnHtmlDecode(sLoopData);
                aRow.push(this._fnBoundData(sLoopData, oConfig.sFieldBoundary, regex));
            } else {
                aRow.push(this._fnBoundData("", oConfig.sFieldBoundary, regex)); //I'm not shure of this!!
            }
        }
        aData.push(aRow.join(oConfig.sFieldSeperator));
    }
}

今はテストできないので、試してみてください。
アランからより良い解決策が得られたら、回答を更新します。

于 2012-10-01T09:39:30.220 に答える
0 
if ( oConfig.bHeader )
    {
        //-1 because we don't want the last row header
        for (i=0; i<dt.nTHead.rows.length-1; i++)
        {
            //wrap jquery object
            $(dt.nTHead.rows[i]).find('th').each(function(){
           var th = $(this);
           sData += th.text().replace(/\n/g," ").replace( /<.*?>/g, "" ).replace(/^\s+|\s+$/g,"");

           var colspan = th.attr('colspan');
           if (!colspan) colspan = 1; //default colspan is 1

           //only the first colspan have the label, other colspans are empty text, we can't implement cell mergin in csv file
           for (j=0; j<colspan; j++)
           {
                 sData += oConfig.sFieldSeperator;
           }
        });

        sData += sNewline;
        }

        for ( i=0, iLen=dt.aoColumns.length ; i<iLen ; i++ )
        {
            if ( aColumnsInc[i] )
            {
                sLoopData = dt.aoColumns[i].sTitle.replace(/\n/g," ").replace( /<.*?>/g, "" ).replace(/^\s+|\s+$/g,"");
                sLoopData = this._fnHtmlDecode( sLoopData );

                sData += this._fnBoundData( sLoopData, oConfig.sFieldBoundary, regex ) +
                    oConfig.sFieldSeperator;
            }
        }
        sData = sData.slice( 0, oConfig.sFieldSeperator.length*-1 );
        sData += sNewline;
    }
于 2012-12-05T11:02:21.647 に答える
0

この回答を見てください https://datatables.net/forums/discussion/22592/export-multiple-row-headers このコードを使用すると、ヘッダーと colspan および rowspans からすべてのセルをエクスポートできます空のセルに変換されます:)

于 2014-12-31T16:50:18.367 に答える