如何在select2数据行中的一行中显示多个空白字符？

Question

我正在使用Select2，我使用{data: [{id:1, text: "..."}]方法来定义选项。我想通过将使用多个空格字符组成的子字符串分组来格式化每个选项。所以像这样：

{data: [
    {id:1, text: "Trees     -     Oak"},
    {id:2, text: "Trees     -     Pine"},
    {id:3, text: "Seas      -     North Sea"},
    {id:4, text: "Seas      -     Baltic Sea"}
]}

当我这样做时，它们会在结果下拉列表中显示为一个空格（处理空格的默认HTML方式）。当我使用 而不是空格时，它们会在下拉列表中显示为字符串“ ”而不是空格。

{data: [
    {id:1, text: "Trees   -   Oak"},
    {id:2, text: "Trees   -   Pine"},
    {id:3, text: "Seas   -   North Sea"},
    {id:4, text: "Seas   -   Baltic Sea"}
]}

有没有办法保留我在数据项的text属性中定义的所有空格？

Answer 1

您不想使用optgroups吗？

{data: [
  {
    text: "Trees",
    children: [
      {id:1, text: "Oak"},
      {id:2, text: "Pine"},
    ]
  },
  {
    text: "Seas",
    children: [
      {id:1, text: "North Sea"},
      {id:2, text: "Baltic Sea"},
    ]
  },
]}

或尝试添加

white-space: pre;

在select的项目的css-class中保留字符串中的所有空格。

正如koenpeters在评论中所说，默认主题css将如下所示：

.select2-container--default .select2-results__option {
  white-space: pre;
}

Answer 2

Yuri Gor给出的答案的替代方法是使用 并将escapeMarkup包含在select2创建中。

$("#isOfTheSelectNode").select2({
    escapeMarkup: function (m) { return m; }
});

缺点是：

• html标记都不会被转义，这可能会导致奇怪 如果文本包含HTML，则为option个元素。
• 搜索空格时，不会匹配包含 的项目。

我认为如果你只想让多个空格被渲染，Yuri Gor的答案会更好。

Answer 3

将var x = q.OrderByDescending(e => e.ShortName).ThenBy(c => SqlFunctions.IsNumeric(Order(c))); private string Order(Contractor c) { var phoneNumber = c.Contacts.AsEnumerable().FirstOrDefault(p => p.Id == c.LeadingContact)?.PhoneNumber ?? ""; if (string.IsNullOrEmpty(phoneNumber) || phoneNumber.Equals("---")) return "a"; return "1"; } 添加到您的样式

white-space: normal;