yadcf - 选择 - 将多个值拆分到单元格中的单独行答案

【问题标题】：yadcf - Select - Split multiple values onto separate lines in cellyadcf - 选择 - 将多个值拆分到单元格中的单独行
【发布时间】：2016-02-05 10:00:42
【问题描述】：

我在 datatables.js 上使用 yadcf 来填充和过滤列 Select e.g.国家名单。选择包含国家/地区的唯一值，例如：

奥地利

法国

意大利

美国

英国

一条记录可以有多个 Country 值。例如，一条记录可能有“USA”和“UK”。国家/地区在单元格中显示如下：

美国，英国

我希望 Country 的值显示在单元格内的不同行上，如下所示：

美国

英国

有可能吗？

【问题讨论】：

您想在表格单元格内或过滤器选择输入单元格内拆分值？如果它在表本身内，则它与 yadcf 无关。
是在表格单元格内。所以大概它会在 datatables.js 中完成？
它肯定与 yadcf 无关，但我认为它甚至与数据表无关，而是与您的表格布局本身有关，由您来安排您的 <table> 及其 <tr>和 ` 您希望它的方式... B.t.w yadcf 可以处理每个单元格的多个值，这要归功于text_data_delimiter 选项，请参阅展示中的第 4 列yadcf-showcase.appspot.com/DOM_source.html
是的，我玩过 text_data_delimiter，我在 yadcf javascript 文件的注释中读到了它。 - 我以为我可以使用
作为分隔符并以这种方式拆分内容，但我无法让它工作，甚至用 '++' 替换 ',' 作为测试。 '
' 会在那里工作吗？
不，但没关系，我自己做了一些设置，看到它工作了jsbin.com/facuxeluya/edit?html,js,output我怀疑你的单元格中有空格而不是WordOne<br>WordTwo，这就是为什么@987654327 @ 不适合你。

【解决方案1】：

您可以使用text_data_delimiter: '<br>'，只要确保<td> 单元格、see live sample here 中没有空格即可

代码sn-ps：

$(document).ready(function(){
  oTable = $('#example').dataTable().yadcf([
    {
      column_number : 0,
      text_data_delimiter: '<br>'
    }]);
});

HTML：

  <table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
    <thead>
      <tr>
        <th>Some Data</th>
        <th>More Data</th>
        <th>Yes / No</th>
        <th>Values</th>
        <th>Tags</th>
      </tr>
    </thead>
    <tbody>
      <tr class="odd gradeX">
        <td>One<br>Two</td>
        <td>More Data 11</td>
        <td>Yes</td>
        <td>a_value,b_value</td>
        <td><span class="label lightblue">Tag1</span><span class="label lightblue">Tag2</span></td>
      </tr>
      <tr class="even gradeC">
        <td>Three<br>Four</td>
        <td>More Data 22</td>
        <td>No</td>
        <td>b_value,c_value</td>
        <td><span class="label lightblue">Tag1</span><span class="label lightblue">Tag3</span></td>
      </tr>      
    </tbody>
  </table>

【讨论】：

您好，我无法正常工作。我的配置中是否缺少某些内容？{ column_number: 3, data: uniqueListNames, select_type: "Select", text_data_delimiter: "<br>", filter_default_label: "Filter By List", filter_reset_button_text: false } 这是我的 <td>List1,List2</td> 的内容
1) data 主要适用于您希望使用预定义的一组值填充过滤器的情况（除非您使用 append_data_to_table_data ），至于分隔符，您似乎在您的 td 值之间使用 , ，没有指向工作示例的链接，我将无法为您提供帮助。
我正在使用 underscore.js uniq 创建一个唯一的“列表名称”数组并将其传递给数据元素：uniqueListNames = _.uniq(fullNamesList);`yadcf.init(cTbl, [ { column_number: 3, text_data_delimiter: "
", data: uniqueListNames, select_type: "Select", filter_default_label: "Filter By List", filter_reset_button_text: false }` text_data_delimiter 不适用于任何字符。
通过使用data，您告诉yadcf不要从表格列中填充过滤器，而是从text_data_delimiter无效的data数组中填充过滤器，例如，请参见jsbin： jsbin.com/joceyesibu/edit?html,js,output
好的，知道了。因此，我的行中有重复数据，但希望 Select 仅显示唯一值。有没有办法在 yadcf 本身内实现这一点（即我可以拆分 TD 中的值）？

【解决方案2】：

我今天回到这个问题并在数据表中解决了它，特别是在“渲染”选项中。

如果数据行中有多个国家名称，我会解析数组并添加一个 BR。这使得国家/地区名称显示在 TD 中的单独行上。

'render': function (data, string, row) {

    var countryNames = "";

    $.each(data, function (i, item) {
        countryNames += item + "<br />";
    })

    return countyNames;
}

【讨论】：