1

这是参考

Kendo UI MultiSelect 小部件中的服务器过滤示例

现在的事情是，我想在加载后添加选定的项目。由于数据源是远程的（类似于自动完成），我不能直接附加它

<!DOCTYPE html>
<html>
<head>
    <base href="http://demos.telerik.com/kendo-ui/multiselect/serverfiltering">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.2.902/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.2.902/styles/kendo.material.min.css" />

    <script src="//kendo.cdn.telerik.com/2015.2.902/js/jquery.min.js"></script>
    <script src="//kendo.cdn.telerik.com/2015.2.902/js/kendo.all.min.js"></script>
</head>
<body>

<div id="example" >
    <div class="demo-section k-header">
        <h4>Products</h4>
        <select id="products"></select>
    </div>
    <script>
        $(document).ready(function() {
           $("#products").kendoMultiSelect({
placeholder: "Select products...",
dataTextField: "airline_name",
dataValueField: "airline_value",
autoBind: false,
dataSource: {
  serverFiltering: true,
  transport: {
    read: {
      url: "/**Server url **/",
    }
  }
}
});

最初 dataSource 为空 ...加载了多选

何时执行以下代码： $("#products").data("kendoMultiSelect").value([{airline_name:"AA", airport_value:"BB"}]);

//上面的statemnt不显示在选定的值中，但在调用value()函数时显示值}); 

</body>
</html>

URL 获取 JSON 数组，它的工作方式就像我输入发送到控制器的字母和控制器在 JSON 数组中发送请求的匹配值时一样。

现在我不能使用下面的语句来添加选定的项目：

$("#products").data("kendoMultiSelect").values(json_array) //doesnt work

MULTISELECT LOAD 处没有数据源。在我的情况下，值尚未加载。以上只是一个例子

4

1 回答 1

0

在下面的代码片段中，您可以看到您的示例正在运行。它基本上是带有按钮的代码，用于选择 DataSource 的两个元素。

你应该做的是定义json_array为一个 id 的数组（在你的情况下ProductID），如果你想使用文本字段选择它们（Chai，Aniseed Syrup...，那么你应该定义kendoMultiSelectisdataValueField和ProductNamenot ProductId。

$(document).ready(function() {
  $("#products").kendoMultiSelect({
    placeholder: "Select products...",
    dataTextField: "ProductName",
    dataValueField: "ProductID",
    autoBind: false,
    dataSource: {
      type: "odata",
      serverFiltering: true,
      transport: {
        read: {
          url: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products",
        }
      }
    }
  });

  $("#sel").on("click", function() {
    $("#products").data("kendoMultiSelect").value([3, 1]);
  });
});
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.2.902/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.2.902/styles/kendo.material.min.css" />

<script src="//kendo.cdn.telerik.com/2015.2.902/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2015.2.902/js/kendo.all.min.js"></script>

<button id="sel" class="k-button">Select Chai &amp; Aniseed</button>
<h4>Products</h4>
<select id="products"></select>

于 2015-09-25T00:01:11.120 回答