Question

我已经使用kendo实现了combobox，但是在加载数据时总是显示undefine。我正在使用comboBox的open事件并手动加载数据。下面是我的代码段。那么我是否缺少任何东西来加载数据？

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.common.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.rtl.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.silver.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.mobile.all.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2019.1.220/js/kendo.all.min.js"></script>
</head>
<body>
  
<input id="combobox" />
<script>
  var placeHolder="select..";
  var data=[];
$("#combobox").kendoComboBox({index: 0,
          minLength: 1,
          filter: "contains",
          dataTextField: "name",
          dataValueField: "id",
          ignoreCase: true,
          autoBind: false,
        	open: function(e){
            e.sender.dataSource.read()
          },
          dataSource: {
            data: [],
            autoSync: false,
            serverFiltering: true,
            transport: {
              read: function (o) {

                var dataResolve = [];

                
                  dataResolve.push("A");
                data=dataResolve;
                o.success(data);
              }
            }
          }
});
</script>
</body>
</html>

Answer 1

在transport.read中，您正在用具有一项“ A”的数组替换“ o”中的潜在响应数据。另外，data变量正在访问最近的闭包（全局？），因为它的范围不受var或let声明的限制。

您的代码

            var dataResolve = [];
            dataResolve.push("A");
            data=dataResolve;
            o.success(data);

这与数组项将是组合框配置中指定的名称为“ name”和“ id”的对象的预期不一致。

不确定要具体做什么，但是要以读取的方式注入自己的数据，请尝试仅使用以下方法：

                o.success([
                  {name:"Bhautik", id: 1},
                ]);

未将数据源配置为连接到任何远程服务器，但是当您打算“调整”数据响应时，可能会发现您想使用dataBound事件。如果您不打算使用远程数据，只需将各项放入dataSource.data配置数组中，而不执行serverFiltering。

Answer 2

您提到dateTextField为“名称”，dateValueField为“ Id”，因此必须使用这样的数组来分配名称。

   dataResolve.push({name:"A", id: 1});

尝试一下：

 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.common.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.rtl.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.silver.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.mobile.all.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2019.1.220/js/kendo.all.min.js"></script>
</head>
<body>
  
<input id="combobox" />
<script>
  var placeHolder="select..";
  var data=[];
$("#combobox").kendoComboBox({index: 0,
          minLength: 1,
          filter: "contains",
          dataTextField: "name",
          dataValueField: "id",
          ignoreCase: true,
          autoBind: false,
        	open: function(e){
            e.sender.dataSource.read()
          },
          dataSource: {
            data: [],
            autoSync: false,
            serverFiltering: true,
            transport: {
              read: function (o) {

                var dataResolve = [];

                
                  dataResolve.push({name:"A", id: 1});
                data=dataResolve;
                o.success(data);
              }
            }
          }
});
</script>
</body>
</html>
 Run code snippetReturn to post

Kendo-ui组合框中的未定义值

2 个答案: