引導表 - 如何訪問內部元素的數據源對象

比方說，我的數據源對象看起來是這樣的：引導表 - 如何訪問內部元素的數據源對象

[{ 
    "id": 123, 
    "name": "blabla1", 
    "kids": { 
     "id": "kid1", 
     "name": "kk1" 
    } 
},{ 
    "id": 456, 
    "name": "blabla2", 
    "kids": { 
     "id": "kid2", 
     "name": "kk2" 
    } 
}]

這是一個列表（陣列）含有2個對象，用「孩子」每個鍵都有一個按鍵，內置物體等等。

當與自舉表工作，每一列連接到所述源對象的密鑰，例如：

<th data-field="id">ID</th>

這裏的問題是如何可以定義列將被連接到在一個內部密鑰源對象？

我已經試過以後的事（適用於上面的示例數據）：

<th data-field="kids.id">Inner ID</th>

而且這是行不通的。 :(

PS：

我知道，我可以通過實現指定的「數據格式」屬性格式每一列的數據，但我更喜歡找一個更直接，更快捷的方式來完成我需要在這情況。

來源

2014-09-28 TheCuBeMan

自舉插件bootstrap-table不提供該機制目前要做到這一點，你應該對他們的GitHub網站上請求此提出問題。

相反，你將有充分的時間來拼合JSON在將其加載到表中之前插件的響應處理程序中10 JSON從接受這個問題的答案：Fastest way to flatten/un-flatten nested JSON objects，你可以按如下方式創建一個ResponseHandler所：

<script> 
    function responseHandler(res) { 
     var flatArray = []; 
     $.each(res, function(i, element) { 
      flatArray.push(JSON.flatten(element)); 
     }); 
     return flatArray; 
    } 
</script>

，然後使用屬性data-response-handler="responseHandler"響應處理程序添加到您的表：

<table data-url="data.json" data-toggle="table" data-height="299" data-response-handler="responseHandler"> 
    <thead> 
    <tr> 
     <th data-field="id">ID</th> 
     <th data-field="name">Name</th> 
     <th data-field="kids.id">Kids Id</th> 
     <th data-field="kids.name">Kids Name</th> 
    </tr> 
    </thead> 
</table>

Plunker example here

來源

2014-09-28 16:19:55 mccannf

如何訪問表格的數據源對象中的內部元素

當一個表附加到提供JSON數據的鏈接時，引導表會自動填充它。

如果任何人想訪問表格填充數據（即使用JSON格式），執行以下操作很簡單。

步驟1：添加data-response-handler="responseHandler"到HTML表格屬性。

步驟2：寫功能如下：

function responseHandler(res) 
 
{ 
 
    var str = JSON.stringify(res, undefined, 2); 
 
    $(document.body).append(str); //this print the whole json data to your page body 
 
    alert(res[0].empno); //this is however a single value of the jason data. 
 
}

<table id="emp_ltc_approved_list_table" data-toggle="table" data-method="post" data-url="getallemployeeapprovedlist.htm" data-response-handler="responseHandler" class="table table-bordered table-condensed table-hover panel-body"> 
 
    <thead class="bg-primary"> 
 
    <tr> 
 
     <th data-field="empno">Employee Code</th> 
 
     <th data-field="dep_name">Employee Name</th> 
 
     <th data-field="slno">SL NO</th> 
 
    </tr> 
 
    </thead> 
 
</table>

JSON數據如下：

[ 
 
    { 
 
    "empno": "74271", 
 
    "dep_name": "ARJUN ROUTH", 
 
    "block": "2014-2017", 
 
    "subblock": "2014-2015", 
 
    "slno": "6", 
 
    "journey_type": "LTC", 
 
    "place_of_visit": "VIZAG", 
 
    "status": "APPROVED", 
 
    "application_date": "15-06-2015", 
 
    "journey_status": "APPROVED" 
 
    }, 
 
    { 
 
    "empno": "92039", 
 
    "dep_name": "ARINDAM MONDAL", 
 
    "block": "2014-2017", 
 
    "subblock": "2014-2015", 
 
    "slno": "1", 
 
    "journey_type": "HTC", 
 
    "place_of_visit": "VIZAG", 
 
    "status": "APPROVED", 
 
    "application_date": "12-06-2015", 
 
    "journey_status": "APPROVED" 
 
    } 
 
]

步驟3：在函數responseHandler(res)中，可以對數據執行任何操作。就像我如何提醒。

來源

2015-06-16 04:27:14 sirshendu

使用responseHandler，我認爲這對我並不好，因爲我的響應數據非常大，每當我重新載入表時，它都會解析我所有的json，當我只需要一些嵌套字段時。我已經通過使用數據格式化程序解決了我的問題，我希望它能幫助某人。

<th data-field="kids.id" data-formatter="KidsIdFormatter">Inner ID</th>

添加數據格式化程序屬性後。請添加更多的JavaScript函數：

function KidsIdFormatter(value, row){ 
//row contains the returned object which applied to current row. 
return row.kids.id; 
}

來源

2015-10-07 06:46:10 nguyenhoai890

使用的數據格式。這爲我工作

function showDescription(cell, row) { 
    return cell.id; 
} 

<th data-field="kids" data-formatter="KidsIdFormatter">Inner ID</th>

來源

2016-12-28 04:38:28 naamadheya

嘗試訪問內部元件是這樣的：kids.name這對我的工作; 你的DataTable dichiaration應該是這樣的：

$('#data-table').DataTable({ 
    ... 
    columns: [ 
     { data: "kids.id" }, 
     { data: "kids.name" }, 
     { data: "name" } 
     ... 
    ], 
    ... 
});

檢查數據表文檔：https://editor.datatables.net/examples/advanced/deepObjects.html

來源

2017-08-08 08:31:02

引導表 - 如何訪問內部元素的數據源對象

回答

相關問題