从现有的 Kendo UI DataSource 创建新的 Kendo UI DataSource答案

【问题标题】：Create new Kendo UI DataSource from existing one从现有的 Kendo UI DataSource 创建新的 Kendo UI DataSource
【发布时间】：2017-12-11 23:09:57
【问题描述】：

我有两个使用相同后端数据的 Kendo UI 组合框，但如果我将相同的 Kendo UI DataSource 应用到它们，那么在一个过滤器上完成过滤第二个过滤器（我没有想要发生）。

有没有办法将现有数据源的数据应用到新数据源中，这样我就可以节省一个服务调用。

    <select runat="server" id="combo1"></select>
    <select runat="server" id="combo2"></select>

  <script>
    var data = [
            { title: "Star Wars: A New Hope", year: 1977 },
            { title: "Star Wars: The Empire Strikes Back", year: 1980 },
            { title: "Star Wars: Return of the Jedi", year: 1983 }
    ];
    var DS1 = new kendo.data.DataSource({
            data: data
    });

    $("#combo1").kendoComboBox({
            placeholder: "Select",
            dataValueField: "year",
            dataTextField: "title",
            filter: "contains",
            dataSource: DS1
    });
    $("#combo2").kendoComboBox({
            placeholder: "Select",
            dataValueField: "year",
            dataTextField: "title",
            filter: "contains",
            dataSource: DS1
    });

  </script>

显示问题的 JS bin：http://jsbin.com/likozaluci/edit?html,output

【问题讨论】：

标签： javascript jquery kendo-ui kendo-datasource kendo-combobox

【解决方案1】：

试试这个：

var data = [
            { title: "Star Wars: A New Hope", year: 1977 },
            { title: "Star Wars: The Empire Strikes Back", year: 1980 },
            { title: "Star Wars: Return of the Jedi", year: 1983 }
    ];
    var DS1 = new kendo.data.DataSource({
            data: data
    });
    
    var DS2 = new kendo.data.DataSource({
            data: data
    });

    $("#combo1").kendoComboBox({
            placeholder: "Select",
            dataValueField: "year",
            dataTextField: "title",
            filter: "contains",
            dataSource: DS1
    });
    
    $("#combo2").kendoComboBox({
            placeholder: "Select",
            dataValueField: "year",
            dataTextField: "title",
            filter: "contains",
            dataSource: DS2
    });

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

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.rtl.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.silver.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/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/2017.3.1026/js/kendo.all.min.js"></script>
</head>
<body>
  
<select runat="server" id="combo1"></select>
<select runat="server" id="combo2"></select>
</body>
</html>

【讨论】：

测试你的代码一次，因为共享相同的剑道组合框实例，过滤输入的文本会自动输入另一个。
用于确定当前值建议的过滤方法。因此，您创建了另一个数据源。修复我的代码

【解决方案2】：

找到这个 jsbin 来回答我的问题，希望它可以帮助其他人...... :)

http://jsbin.com/eDOVEV/2/edit?html,output

<!DOCTYPE html>
<html>
<head>
    <title>KendoUI Test Page</title>

    <link href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.default.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.dataviz.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.mobile.all.min.css" rel="stylesheet" />

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://cdn.kendostatic.com/2013.2.918/js/kendo.all.min.js"></script>
</head>
<body>
    <div id="grid"></div>
    <br />
    <div id="grid2"></div>
    <br />
    <div id="grid3"></div>

    <script> 
        var crudServiceBaseUrl = "http://demos.kendoui.com/service",
            dataSource = new kendo.data.DataSource({
                transport: {
                    read:  {
                        url: crudServiceBaseUrl + "/Products",
                        dataType: "jsonp"
                    },
                    update: {
                        url: crudServiceBaseUrl + "/Products/Update",
                        dataType: "jsonp"
                    },
                    destroy: {
                        url: crudServiceBaseUrl + "/Products/Destroy",
                        dataType: "jsonp"
                    },
                    create: {
                        url: crudServiceBaseUrl + "/Products/Create",
                        dataType: "jsonp"
                    },
                    parameterMap: function(options, operation) {
                        if (operation !== "read" && options.models) {
                            return {models: kendo.stringify(options.models)};
                        }
                    }
                },
                batch: true,
                pageSize: 20,
                schema: {
                    model: {
                        id: "ProductID",
                        fields: {
                            ProductID: { editable: false, nullable: true },
                            ProductName: { validation: { required: true } },
                            UnitPrice: { type: "number", validation: { required: true, min: 1} },
                            Discontinued: { type: "boolean" },
                            UnitsInStock: { type: "number", validation: { min: 0, required: true } }
                        }
                    }
                },
                change: function() {
                    var data = this.data().toJSON();
                    dataSource2.data(data);
                    dataSource3.data(data);
                }
            }),
            dataSource2 = new kendo.data.DataSource({
                data: [],
                filter: { field: "ProductName", operator: "startswith", value: "c" }
            }),
            dataSource3 = new kendo.data.DataSource({
                data: [],
                filter: { field: "ProductName", operator: "startswith", value: "p" }
            });

        $(document).ready(function () {

            $("#grid").kendoGrid({
                dataSource: dataSource,
                pageable: true,
                height: 430,
                toolbar: ["create"],
                columns: [
                    "ProductName",
                    { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "100px" },
                    { field: "UnitsInStock", title:"Units In Stock", width: "100px" },
                    { field: "Discontinued", width: "100px" },
                    { command: ["edit", "destroy"], title: "&nbsp;", width: "172px" }],
                editable: "inline"
            });

            $("#grid2").kendoGrid({
                dataSource: dataSource2,
                columns: [
                    "ProductName",
                    { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "100px" }
                ]
            });

            $("#grid3").kendoGrid({
                dataSource: dataSource3,
                columns: [
                    "ProductName",
                    { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "100px" }
                ]
            });
        });
    </script>

</body>
</html>

【讨论】：