从现有的创建新的Kendo UI DataSource

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了从现有的创建新的Kendo UI DataSource相关的知识,希望对你有一定的参考价值。

我有两个使用相同后端数据的Kendo UI Combo-Box,但是如果我对它们两个应用相同的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

答案

试试这个 :

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>
另一答案

找到这个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>

以上是关于从现有的创建新的Kendo UI DataSource的主要内容,如果未能解决你的问题,请参考以下文章

从现有的 SwiftUI @States 派生绑定

从现有的 Xcode 项目制作 CocoaPod

如何从现有的远程分支创建本地分支?

如何从现有的迁移文件的轨道删除脚本

从现有的层次结构创建不可变的集合结构

c#从现有的对象数组创建一个新列表[关闭]