kendo.data.DataSource - filter

Posted on Edited on In Views: Disqus:

 

一、一個單一 filter 用法如下

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2020.1.406/js/kendo.all.min.js"></script>
</head>

<body>
    <script>
        var dataSource = new kendo.data.DataSource({
            data: [
                { name: "Tea", category: "Beverages" },
                { name: "Coffee", category: "Beverages" },
                { name: "Ham", category: "Food" },
                { name: "banana", category: "Friut" },
            ],
            filter: { field: "name", operator: "eq", value: "banana" }
        });

        dataSource.fetch(function () {
            var view = dataSource.view();
            for (let i = 0; i < view.length; i++) {
                console.log(view[i].name);
            }
        });
    </script>
</body>

</html>

執行結果為

 

二、應用多個 filter 的用法如下

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2020.1.406/js/kendo.all.min.js"></script>
</head>

<body>
    <script>
        var dataSource = new kendo.data.DataSource({
            data: [
                { name: "Tea", category: "Beverages" },
                { name: "Coffee", category: "Beverages" },
                { name: "Ham", category: "Food" },
                { name: "banana", category: "Friut" },
            ],
            filter: {
                logic: "or",
                filters: [
                    { field: "category", operator: "eq", value: "Beverages" },
                    { field: "category", operator: "eq", value: "Food" }
                ]
            }
        });

        dataSource.fetch(function () {
            var view = dataSource.view();
            for (let i = 0; i < view.length; i++) {
                console.log(view[i].name);
            }
        });
    </script>
</body>

</html>

執行結果為

 

三、把 logic 拿掉預設是 AND 邏輯

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2020.1.406/js/kendo.all.min.js"></script>
</head>

<body>
    <script>
        var dataSource = new kendo.data.DataSource({
            data: [
                { name: "Tea", category: "Beverages" },
                { name: "Coffee", category: "Beverages" },
                { name: "Ham", category: "Food" },
                { name: "banana", category: "Friut" },
            ],
            filter: {
                //logic: "or",
                filters: [
                    { field: "category", operator: "eq", value: "Beverages" },
                    { field: "name", operator: "eq", value: "Coffee" }
                ]
            }
        });

        dataSource.fetch(function () {
            var view = dataSource.view();
            for (let i = 0; i < view.length; i++) {
                console.log(view[i].name);
            }
        });
    </script>
</body>

</html>

執行結果為

 

四、上例的 AND 邏輯也等於下面這寫法

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2020.1.406/js/kendo.all.min.js"></script>
</head>

<body>
    <script>
        var dataSource = new kendo.data.DataSource({
            data: [
                { name: "Tea", category: "Beverages" },
                { name: "Coffee", category: "Beverages" },
                { name: "Ham", category: "Food" },
                { name: "banana", category: "Friut" },
            ],
            filter: [
                { field: "category", operator: "eq", value: "Beverages" },
                { field: "name", operator: "eq", value: "Coffee" }
            ]
        });

        dataSource.fetch(function () {
            var view = dataSource.view();
            for (let i = 0; i < view.length; i++) {
                console.log(view[i].name);
            }
        });
    </script>
</body>

</html>

執行結果為

 

參考資料：

kendo.data.DataSource - filter