Question

我们正在使用带有mvc包装器的kendo multiselect。设置上的所有内容都可以正常工作，但所选项目按数据值字段排序。我只是希望它们按数据文本字段排序，但到目前为止没有任何工作。

@(Html.Kendo().MultiSelectFor(m => m.SelectedPersonIds)
      .HtmlAttributes(new { style = "width: 400px" })
      .DataTextField("Name")
      .DataValueField("PersonID")
      .Filter("contains")
      .Height(400)
      .DataSource(ds =>
      {
       ds.Read(read =>
        {
            read.Action("GetPersons", "Person", new { area = "" });
        });
      })
      .ItemTemplateId("detailTemplate")
      .TagTemplateId("valueTemplate")
)

这是工作版本。我尝试添加

ds.Custom().Sort(s => s.Add("Name").Ascending());

和其他方法，但仍然没有运气。来自服务器的初始数据已经过排序，因此您选择的列表将完美排序（按名称）。

我如何实现选定的项目也按名称而不是按ID排序？提前谢谢。

Answer 1

我不知道是否有ASP.NET解决方案，但我可以给你JavaScript来解决它：

function onMultiselectChange(e) {
        e.sender.tagList.find('> li').sort(function (a, b) {
            return $(a).text() > $(b).text();
        }).appendTo(e.sender.tagList);
    }
});

您可以将它应用于ASP.NET multiselect，如下所示：

.Events(e =>
    {
        e.Change("onMultiselectChange")
    })

Answer 2

不要手动重新排列 DOM 元素。这样做会破坏显示项目和内部数据之间的映射。移动元素后，取消选择一项会导致底层数据中取消选择不同的数据项，并且绑定回服务器会产生错误的结果。

这是一种正确的排序方式，因为值字段是“PersonID”，但您希望它按“姓名”排序

function orderMultiSelect(multi) {
    const dataItems = multi.dataItems();
    dataItems.sort(
        (a, b) => {
            const textA = a.Name;
            const textB = b.Name;
            return (textA < textB) ? -1 : (textA > textB) ? 1 : 0;
        }
    );
   const values = dataItems.map(di => di.PersonID);
   multi.value(values);
}

function onMultiselectChange(e) {
    orderMultiselect(e.sender);
}

然后您可以将此处理函数绑定到 DataBound 和 Change 事件：

@(Html.Kendo().MultiSelectFor(m => m.SelectedPersonIds)
    .HtmlAttributes(new { style = "width: 400px" })
    .DataTextField("Name")
    .DataValueField("PersonID")
    .Filter("contains")
    .Height(400)
    .DataSource(
        ds =>
        {
           ds.Read(
              read =>
                  read.Action("GetPersons", "Person", new { area = "" })
             );
        }
      ).ItemTemplateId("detailTemplate")
      .TagTemplateId("valueTemplate")
      .Event(
          e => 
            e.DataBound("onMultiselectChange")
              .Change("onMultiselectChange")
      )
)

http://plnkr.co/edit/0gS9SDeccgOmfsGp?preview

排序剑道多重选择DataTextField选择的项目

2 个答案: