kendo.data.DataSource - filter
一、一個單一 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>
執行結果為
參考資料: