ruby-on-rails - 如何将自定义列添加到数据表?
问题描述
我在用
gem 'jquery-datatables-rails', '3.4.0'
gem 'ajax-datatables-rails'
这个表的我的 CoffeeScript 看起来像
# Datatables
$ ->
table = $('#qr-submissions-table').dataTable
dom: 'C<"clear">lfrtip'
processing: true
serverSide: true
ajax: $('#qr-submissions-table').data('source')
pagingType: 'full_numbers'
columns: [
{data: 'custom_columns'}
{data: 'delivery_number' }
{data: 'qpi_department' }
{data: 'qr_client' }
{data: 'date_submitted'}
{data: 'bay_number' }
{data: 'submitted_by'}
{data: 'delivery_note'}
{data: 'ops' }
]
"order": [[ 3, "desc" ]]
columnDefs: [
{ "orderable": false, "targets": [3, 7, 8]},
{"targets": 1, visible: ($("#delivery_number_show").val() == 'true')},
{"targets": 2, visible: ($("#division_show").val() == 'true')},
{"targets": 3, visible: ($("#client_show").val() == 'true')},
{"targets": 4, visible: ($("#scan_time_show").val() == 'true')},
{"targets": 5, visible: ($("#delivery_location_show").val() == 'true')}
{"targets": 6, visible: ($("#submitted_by_show").val() == 'true')},
{"targets": 7, visible: ($("#delivery_note_show").val() == 'true')},
{"targets": 8, visible: ($("#photo_show").val() == 'true')},
]
这里的自定义列字段是哈希,如'{ "name1" : "value1", "name2" : "value2" }'
.. 我如何将其显示为 coulm 名称和值。name1 和 name2 将是列标题,value1 和 value2 将是对应的行值。每行对于“value1”和“value2”都有不同的值。有没有办法做到这一点?请帮忙?
解决方案
不幸的是,我不知道 Ruby-on-rails,但我知道 jQuery DataTables。
如果您的 JSON 响应如下所示:
[{ "Id": "1", "Name": [{ "FirstName": "Tiger", "LastName": "Nixon"}], "Position": "System Architect", "Office": "Edinburgh", "Age": 61 },
{ "Id": "2", "Name": [{ "FirstName": "Garrett", "LastName": "Winters"}], "Position": "Accountant", "Office": "Tokyo", "Age": 63 },
{ "Id": "3", "Name": [{ "FirstName": "Ashton", "LastName": "Cox"}], "Position": "Jr. Technical Author", "Office": "San Francisco", "Age": 66 }];
并且您的列的名称将是固定的(在您的示例中:“name1”和“name2”),您可以执行以下操作(我将在同一个示例中为您提供两种实现方式):
var jsonData = [
{ "Id": "1", "Name": [{ "FirstName": "Tiger", "LastName": "Nixon"}], "Position": "System Architect", "Office": "Edinburgh", "Age": 61 },
{ "Id": "2", "Name": [{ "FirstName": "Garrett", "LastName": "Winters"}], "Position": "Accountant", "Office": "Tokyo", "Age": 63 },
{ "Id": "3", "Name": [{ "FirstName": "Ashton", "LastName": "Cox"}], "Position": "Jr. Technical Author", "Office": "San Francisco", "Age": 66 }];
var table = $('#example').DataTable({
LengthChange: false,
data: jsonData,
columns: [
{ data: 'Id'},
{ data: 'Name[0].FirstName' }, // 1st Way
{
data: null,
title: "LastName",
render: function(data, type, full, meta) { // 2nd Way
return data.Name[0].LastName;
}
},
{ data: 'Position' },
{ data: 'Office' },
{ data: 'Age' }
]
});
<link href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<table id="example" class="table display" style="width:100%">
<thead>
<tr>
<th>Id</th>
<th>FirstName</th>
<th>LastName</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
</tr>
</thead>
</table>
注意:在这种情况下,我正在尝试使用键名模拟您的自定义列字段
但是,如果您的列是动态的(名称可能会更改),您需要执行以下操作: 示例
推荐阅读
- c++ - 如何在 Msys2 上使用 Boost 编译 C++ 代码
- python - Pandas Duplicate() 一次返回所有重复项,除了一行
- memcached - Vtiger CRM 开源版本 7x(Meme Cache / Varnish?)
- kotlin - 预期为 BEGIN_OBJECT,但在第 1 行第 2 列路径为 BEGIN_ARRAY $ ERROR
- telegram - 广播扩展将 PixelBuffer 发送到 OpenTok 服务器
- python - 在 ffmpeg 函数参数中传递字节而不是文件路径
- android - 创建一个没有 Json 数组名称的 Json 数组
- javascript - 更改 SVG 高度而不更改宽度或使其倾斜/拉伸
- postgresql - ORDER BY 和 ROW_NUMBER() 优先级 - DB2 和 PostgreSQL 返回不同的结果,相同的查询
- reactjs - 无法播放接收到的音频数据/缓冲区 Reactjs