Question

获取 kendo 下拉列表的 ID

2020-11-27

896

jquery kendo-ui

我在一个页面中有三个 kendodropdownlist。我想知道用户当前操作的是哪个下拉列表。这样我就可以区分哪个下拉列表并将 id 发送到后端并进行不同的检查。

那么，如何在函数 valueMapper 中获取下拉列表的 id ？

$(document).ready(function() {
        $(".orders").kendoDropDownList({
            template: '<span class="order-id">#= OrderID #</span> #= ShipName #, #= ShipCountry #',
            dataTextField: "ShipName",
            dataValueField: "OrderID",
            filter: "contains",
            virtual: {
                itemHeight: 26,
                valueMapper: function(options) {
                  
                  //I want to get the id here and include in the below url
                  //example:'test.aspx?q=checking&ddlId=' + ddlId,
                    $.ajax({
                        url: "https://demos.telerik.com/kendo-ui/service/Orders/ValueMapper",
                        type: "GET",
                        dataType: "jsonp",
                        data: convertValues(options.value),
                        success: function (data) {

                            options.success(data);
                        }
                    })
                }
            },
            height: 520,
            dataSource: {
                type: "odata",
                transport: {
                    read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
                },
                schema: {
                    model: {
                        fields: {
                            OrderID: { type: "number" },
                            Freight: { type: "number" },
                            ShipName: { type: "string" },
                            OrderDate: { type: "date" },
                            ShipCity: { type: "string" }
                        }
                    }
                },
                pageSize: 80,
                serverPaging: true,
                serverFiltering: true
            }
        });
    });

    function convertValues(value) {
        var data = {};

        value = $.isArray(value) ? value : [value];

        for (var idx = 0; idx < value.length; idx++) {
            data["values[" + idx + "]"] = value[idx];
        }

        return data;
    }

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.3.1118/styles/kendo.default-v2.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2020.3.1118/js/kendo.all.min.js"></script>
</head>
<body>
  
<input class="orders" id="o1" style="width: 400px" />
<input class="orders" id="o2" style="width: 400px" />
<input class="orders" id="o3" style="width: 400px" />

</body>
</html>

Answer 1

开始吧。在 Kendo Dojo 中尝试一下：

$(document).ready(function() {
  $(".orders").each(function() {
    var self = $(this).kendoDropDownList({
      template: '<span class="order-id">#= OrderID #</span> #= ShipName #, #= ShipCountry #',
      dataTextField: "ShipName",
      dataValueField: "OrderID",
      filter: "contains",
      virtual: {
        itemHeight: 26,
        valueMapper: function(options) {
          console.log(self.attr('id'));

          $.ajax({
            url: "https://demos.telerik.com/kendo-ui/service/Orders/ValueMapper",
            type: "GET",
            dataType: "jsonp",
            data: convertValues(options.value),
            success: function (data) {
              options.success(data);
            }
          })
        }
      },
... snipped ...

这里的关键是将 kendoDropDownList 对象分配给一个变量，以便您可以引用它。

Answer 2

仅建议作为一种 hack，您可以在值发生变化时检查 ul 的 id。

change: function(e) {
  console.log(e.sender.ul[0].id); // o1_listbox
},

这不会为您提供准确的 id，但您可以轻松地从中提取出来