在选择下拉列表中存储重复的 DataTables 数据?

Posted

技术标签:

【中文标题】在选择下拉列表中存储重复的 DataTables 数据?【英文标题】:Store repeat DataTables data in select dropdown? 【发布时间】:2015-01-09 19:39:10 【问题描述】:

我需要一种优雅的方式将重复数据存储在 DataTables 中的选择下拉列表中。例如,我有 2 个问题,每个问题都有不同的答案。在这种情况下,问题 1 (keyno 1) 有 2 个可能的答案,问题 2 (keyno 2) 有 3 个可能的答案。在小提琴示例中,有 5 行(包含重复信息)但应该只有 2 行(每个 keyno 一个)。如何动态创建包含答案的下拉列表并仅显示我的 2 行,例如 for 循环?我不确定。

http://jsfiddle.net/s827x/28/

var data = [
        'keyno': '1', 'quest': 'Does a cat meow?', 'ans': 'yes',
        'keyno': '1', 'quest': 'Does a cat meow?', 'ans': 'no',
        'keyno': '2', 'quest': 'What color is a stop sign?', 'ans': 'red',
        'keyno': '2', 'quest': 'What color is a stop sign?', 'ans': 'yellow',
        'keyno': '2', 'quest': 'What color is a stop sign?', 'ans': 'green'
    ]

    $('#questtable').DataTable(
            "data": data,
            "columns": [
                 data: 'keyno' ,
                 data: 'quest' ,
                 data: 'ans' 
            ]
    );

【问题讨论】:

您需要将其减少到两行,每行都有一个用于 ans 而不是字符串的数组。我喜欢使用 mustache 将服务器中的哑 json 转换为数据表注入到单元格中的哑 html,因此我不必使用 JS 构建 HTML。 在这种情况下,我不知道如何从我现有的数组创建一个新数组。 这就是你需要做的,但我承认这并不容易。像 lodash 这样的东西可能会有所帮助,但它仍然需要一些跑腿。提出关于转换“json”的问题可能会更好。无论如何,一旦行任务不重复并且 ans 包含所有可能性,将 col 转换为下拉列表非常简单,并且您走在正确的轨道上。 【参考方案1】:

我最终做的是为我的问题创建一个数组,为答案创建一个数组,然后将 keyno 匹配起来。该表加载问题,并在清除循环后重绘添加下拉选项以匹配问题的答案。 :Dhttp://jsfiddle.net/s827x/37/

$('#questtable').DataTable(
        "data": quest,
        "columns": [
             data: 'keyno' ,
             data: 'quest' ,
            
                data: 'ans',
                "mRender": function (data, type, full) 
                    return '<select id="'+full.keyno+'"></select>';
                
            
        ],
        "fnDrawCallback": function () 
            $('#questtable tbody tr').each(function () 
                for (var i = 0; i < ans.length; i++) 
                    if ($(this).find('td').eq(0).text() == ans[i].keyno) 
                        $(this).find('td').eq(2).find('select').append('<option value="' + ans[i].ans + '">' + ans[i].ans+ '</option>');

                    
                
            ); 
        
    );

【讨论】:

以上是关于在选择下拉列表中存储重复的 DataTables 数据?的主要内容,如果未能解决你的问题,请参考以下文章

DataTables 中的单个下拉列表中的多列过滤

jQuery DataTables 中的下拉分页

[使用多个选择下拉列表过滤HTML表

在文件选择器中禁用下拉列表[重复]

如何让下拉选择从 Django 模型中填充模板中的 DataTables 表?

DataTables - 使用单个下拉菜单在多列中搜索