X-水平显示的可编辑清单

Question

我使用 xeditable (http://vitalets.github.io/x-editable/docs.html), and the script is shown below and is also located at 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".

这怎么可能？

Answer 1

似乎要更改 CSS 中的内容以供 chrome 使用。

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

https://jsfiddle.net/8hcrxa95/

Answer 2

使用显示选项。

  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/

X-水平显示的可编辑清单

X-Editable checklist displayed horizontally

html

javascript

css

jquery

x-editable