2011 年 6 月 19 日星期日

向下鑽取列

更新：這篇部落格文章是在 DataTables 1.10 和 jQuery 1.7 發布之前撰寫的。此處僅保留作為歷史紀錄。現在有新版本的文章。

表格是顯示可輕鬆製成表格的摘要資料的完美解決方案。然而，通常您會希望讓您的網站/應用程式的最終使用者能夠向下鑽取表格中的資料，並顯示更詳細的資訊。這有助於清理介面，防止最終使用者被資訊淹沒，並讓他們有更多控制權。

DataTables 提供了兩個 API 方法，可將詳細資料列附加到表格中的父列；fnOpen 用於顯示額外資料，而其相對應的方法 fnClose 用於移除它。詳細資料列中顯示的資料可以是您想要的任何內容，因為fnOpen 會接受 DOM 節點或 HTML 字串。在這個範例中，我將展示一個內部表格，它會以動畫方式打開和關閉。

此範例還展示了 DataTables 1.8 中包含的新 mDataProp 選項的作用。您取得詳細資料列資料的方式有多種，包括 Ajax 或 DOM 來源。在這個範例中，透過使用 mDataProp 和 DataTables 使用 JSON 物件進行表格顯示，我們可以使用提供給表格的原始物件，顯示表格預設檢視中沒有的資訊。

	渲染引擎	瀏覽器	CSS 等級

表格

和往常一樣，我會使用我的標準設定在表格中顯示，但在這種情況下，預設只會顯示五個欄位中的三個欄位 - 其餘資訊將顯示在詳細資料顯示中。另請注意，表格開頭有一個額外的欄位，用於顯示/隱藏詳細資料列，最終使用者可以點擊該欄位來控制顯示。

<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
    <thead>
        <tr>
            <th></th>
            <th>Rendering engine</th>
            <th>Browser</th>
            <th>CSS grade</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

資料來源如下所示

{ "aaData": [
    {
        "engine": "Trident",
        "browser": "Internet Explorer 4.0",
        "platform": "Win 95+",
        "version": "4",
        "grade": "X"
    },
    {
        "engine": "Trident",
        "browser": "Internet Explorer 5.0",
        "platform": "Win 95+",
        "version": "5",
        "grade": "C"
    },
    ...
] }

而 DataTables 的初始化非常簡單，使用了mDataProp。請注意，第一欄的 mDataProp 值為 null，並且提供了 sDefaultContent，以讓 DataTables 渲染靜態字串。

$(document).ready(function() {
  var anOpen = [];
    var sImageUrl = "/release-datatables/examples/examples_support/";

    var oTable = $('#example').dataTable( {
        "bProcessing": true,
        "sAjaxSource": "/release-datatables/examples/ajax/sources/objects.txt",
        "aoColumns": [
            { 
               "mDataProp": null, 
               "sClass": "control center", 
               "sDefaultContent": '<img src="'+sImageUrl+'details_open.png'+'">'
            },
            { "mDataProp": "engine" },
            { "mDataProp": "browser" },
            { "mDataProp": "grade" }
        ]
    } );
} );

檢視控制

現在我們已經顯示了表格，我們需要將事件處理常式新增到控制按鈕，以根據需要呼叫 fnOpen 和 fnClose。在這裡，我們將保留對我們在陣列 anOpen 中「開啟」的任何 TR 列的引用 - 透過這種方式，我們可以使用 $.inArray 來查看是否應該開啟列，或者它是否已經開啟，因此要關閉它。我們還會更新控制圖像以顯示「關閉」按鈕，為最終使用者提供有關點擊後控制項將執行哪些操作的額外資訊。

另請注意函式 fnFormatDetails，它用於建構提供給 fnOpen 進行顯示的字串。我們使用 fnGetData 來取得該列的原始資料物件，以取得顯示的資訊 (如前所述，您可以透過任何您想要的方式取得這些資料)。

$('#example td.control').live( 'click', function () {
   var nTr = this.parentNode;
   var i = $.inArray( nTr, anOpen );

   if ( i === -1 ) {
      $('img', this).attr( 'src', sImageUrl+"details_close.png" );
      oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
      anOpen.push( nTr );
    }
    else {
      $('img', this).attr( 'src', sImageUrl+"details_open.png" );
      oTable.fnClose( nTr );
      anOpen.splice( i, 1 );
    }
} );

function fnFormatDetails( oTable, nTr )
{
  var oData = oTable.fnGetData( nTr );
  var sOut = 
    '<div class="innerDetails">'+
      '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
        '<tr><td>Rendering engine:</td><td>'+oData.engine+'</td></tr>'+
        '<tr><td>Browser:</td><td>'+oData.browser+'</td></tr>'+
        '<tr><td>Platform:</td><td>'+oData.platform+'</td></tr>'+
        '<tr><td>Version:</td><td>'+oData.version+'</td></tr>'+
        '<tr><td>Grade:</td><td>'+oData.grade+'</td></tr>'+
      '</table>'+
    '</div>';
  return sOut;
}

動畫

這就是表格的完整功能 - 但讓我們新增一些動畫，讓最終使用者使用起來更順暢。jQuery 函式 $().slideDown 和 $().slideUp 用於動畫。請注意，在 fnFormatDetails 中，我放置了一個類別為 "innerDetails" 的包裝元素，這就是我們將動畫化的元素。fnOpen 會傳回對 TR 節點的引用，該節點會附加到表格以顯示詳細資料列，我們將其用作選擇器的一部分，以取得所需的元素。

更新後的控制程式碼如下所示

$('#example td.control').live( 'click', function () {
  var nTr = this.parentNode;
  var i = $.inArray( nTr, anOpen );

  if ( i === -1 ) {
    $('img', this).attr( 'src', sImageUrl+"details_close.png" );
    var nDetailsRow = oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
    $('div.innerDetails', nDetailsRow).slideDown();
    anOpen.push( nTr );
  }
  else {
    $('img', this).attr( 'src', sImageUrl+"details_open.png" );
    $('div.innerDetails', $(nTr).next()[0]).slideUp( function () {
      oTable.fnClose( nTr );
      anOpen.splice( i, 1 );
    } );
  }
} );

最後，為了讓動畫正常運作，我們需要預設隱藏資訊包裝元素，並讓 jQuery 處理其顯示

div.innerDetails { display: none }

結論

使用 fnOpen 顯示向下鑽取資料可能是一種非常有用的表格互動，並且如本範例所示，它是高度可自訂的。顯示的觸發、顯示的內容以及資訊的資料來源都可以緊密整合到您的設定中。

和往常一樣，論壇中有一個主題，用於針對這篇文章進行評論和討論。