Question

这是我正在使用的HTML页面，它无法正常工作。问题在哪里可以任何人检查一次。

此处问题在过滤网格之后，下拉值也会发生变化或过滤。

可以在html页面中检查此代码。

<!DOCTYPE html>
<html lang="en-US">
<head>
    <link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css"    rel="stylesheet" type="text/css" />
    <link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
    <link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
    <link  href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.dataviz.default.min.css"  rel="stylesheet" type="text/css" />

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script>
    <script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.aspnetmvc.min.js"></script>
</head>
<body>
<div id="example" class="k-content">



    <span class="nwcselection">data</span>
    <input id="ddl"/></div>
<input type="button" id="btnfilter" value="Filter" onclick="Filter()" />
<div id="grid"></div>
</div>


<script type="text/javascript">
    var data =new kendo.data.DataSource({
        type: "odata",
        transport: {
            read:
                    "http://demos.kendoui.com/service/Northwind.svc/Products",
        },
    });
    function createGrid()
    {
        var grid= $("#grid").kendoGrid({
            dataSource:data,
            schema: {
                model: {
                    fields: {
                        ProductID: { type: "number" },
                        UnitPrice: { type: "number" },
                        ProductName: { type: "string" },
                    } }},

            pageable: true,
            columns: [
                { field: "ProductID", title:"Product ID", width:100 },
                { field: "ProductName", title:"Product Name" },
                { field: "UnitPrice", title:"Unit Price", width: 100 } ]
        });
    }






    function dd()
    {
        $("#ddl").kendoDropDownList({
            dataSource: data,
            optionLabel: "Select category...",
            dataTextField: "ProductName",
            dataValueField: "ProductName"
        }).data("kendoDropDownList");
    }


    function Filter() {

        $("#btnfilter").click(function () {
            $filter = new Array();
            $ProductName = $("#ddl").data("kendoDropDownList").value();

            if($ProductName)
            {
                $filter.push({ field: "ProductName",
                    operator: "contains", value: $ProductName });
            }
            var grid = $("#grid").data("kendoGrid");

            grid.dataSource.filter({
                logic: "and",
                filters: $filter
            });
        });

    }


    $(document).ready(function () {

        createGrid();
        Filter();
        dd();
    });
</script>
</body>

Answer 1

问题是你对Grid和DropDown使用相同的DataSource：它们就像指向同一个对象的指针。过滤一个将过滤另一个，因为它们实际上是相同的。

尝试两次创建DataSource：

var ds1 =new kendo.data.DataSource({
    type: "odata",
    transport: {
        read:
                "http://demos.kendoui.com/service/Northwind.svc/Products"
    }
});
var ds2 =new kendo.data.DataSource({
    type: "odata",
    transport: {
        read:
                "http://demos.kendoui.com/service/Northwind.svc/Products"
    }
});

然后在不同的元素中使用它们：

var grid = $("#grid").kendoGrid({
    dataSource: ds1,
    schema    : {
        model: {
            fields: {
                ProductID  : { type: "number" },
                UnitPrice  : { type: "number" },
                ProductName: { type: "string" }
            } }},

    pageable: true,
    columns : [
        { field: "ProductID", title: "Product ID", width: 100 },
        { field: "ProductName", title: "Product Name" },
        { field: "UnitPrice", title: "Unit Price", width: 100 }
    ]
});

$("#ddl").kendoDropDownList({
    dataSource    : ds2,
    optionLabel   : "Select category...",
    dataTextField : "ProductName",
    dataValueField: "ProductName"
}).data("kendoDropDownList");

自定义过滤器，带有网格下拉列表

1 个答案: