X-可编辑清单水平显示答案

【问题标题】：X-Editable checklist displayed horizontallyX-可编辑清单水平显示
【发布时间】：2016-01-04 17:40:36
【问题描述】：

我使用 xeditable (http://vitalets.github.io/x-editable/docs.html) 做了一个清单，脚本如下所示，也位于https://jsfiddle.net/m8L2hyko/。

<a href="#" id="options" data-type="checklist" data-pk="1" data-url="/post" data-title="Select options"></a>

$('#options').editable({
  value: [2, 3],
  source: [ {value: 1,text: 'option1'}, {value: 2,text: 'option2'}, {value: 3,text: 'option3'}]
});

插件将<a> 元素替换为以下 HTML。

<a data-title="Select options" data-url="/post" data-pk="1" data-type="checklist" id="options" href="#" class="editable editable-click">
  option2<br>option3
</a>

正如所见，<br> 元素被插入到每个选定的选项之间。我不想将其显示为带有换行符的垂直列表，而是将它们显示为水平逗号分隔列表，例如“option2，option3”。

这怎么可能？

【问题讨论】：

这是 .. 您将不得不下载 jqueryui-editable.js 而不是从 CDN 调用它。并自己编辑 JS ...只需执行“查找”并搜索“br”即可。它非常广泛，但完全有可能。
@Zak 从可维护性的角度来看，希望不要走那条路。相反，也许使用 CSS 使 <br> 显示为空格？我知道我说的是逗号分隔，但空格也可以。

标签： javascript jquery html css x-editable

【解决方案1】：

使用显示选项。

  display: function(value, sourceData) {
    //display checklist as comma-separated values
    var html = [],
      checked = $.fn.editableutils.itemsByValue(value, sourceData);

    if (checked.length) {
      $.each(checked, function(i, v) {
        html.push($.fn.editableutils.escape(v.text));
      });
      $(this).html(html.join(', '));
    } else {
      $(this).empty();
    }
  }

https://jsfiddle.net/m8L2hyko/3/

【讨论】：

【解决方案2】：

看起来像是在为 chrome 更改 CSS 中的内容。

#options br {
  content: "";
}
#options br:after {
  content: ", ";
}

https://jsfiddle.net/8hcrxa95/

【讨论】：

适用于 Chrome，但不适用于 FF。不确定IE。我可以使用display:none，但是它们之间没有空格。也许可以以某种方式使用填充/边距，但不要这么认为。
javascript 方法可能更有意义，并且在所有浏览器中都是一致的。我发现覆盖 br 的想法很有趣，并想知道是否可以单独使用 CSS。