SAPUI5 (27) - 基于 ODataModel 的筛选

OData 服务提供了筛选的功能,基于服务器端的筛选。方法是在 URL 的后面加上筛选参数 $filter=<filter exp.>http://www.odata.org/documentation/odata-version-2-0/uri-conventions/ 页面有比较详细的介绍,这里仅对要点进行说明。

筛选在 OData 服务中,被称作 Filter System Query Option。我们先来看一个简单的例子,比如要查询城市为 Redmond 的供应商,我们可以使用 GET 方法,URL 为:

http://services.odata.org/V3/(S(user-token))/OData/OData.svc/Suppliers?$filter=Address/City eq 'Redmond'

当然,浏览器中的URL是不能含有空格和特殊字符的,所以该URL中的空格被替换成 %20, 而单引号被替换成 %27

http://services.odata.org/V3/(S(user-token))/OData/OData.svc/Suppliers?$filter=Address/City%20eq%20%27Redmond%27

逻辑操作符

  • eq: 等于 (Equal)
  • ne: 不等于 (Not equal)
  • gt: 大于 (Greater than)
  • ge: 大le于或等于 (Greater than or equal)
  • lt: 小于 (Less than)
  • le: 小于或等于 (Less than or equal)
  • 逻辑上的 and / or / not

字符串操作符

主要掌握:substringof, startswith 和 endswith

sap.ui.model.fiterOperator定义了相应的操作符,但是对于 and/or 采取了不同的方法。

  • sap.ui.model.FilterOperator.EQ: 对应 eq
  • sap.ui.model.FilterOperator.NE: 对应 ne
  • sap.ui.model.FilterOperator.GT: 对应 gt
  • sap.ui.model.FilterOperator.GE: 对应 ge
  • sap.ui.model.FilterOperator.LT: 对应 lt
  • sap.ui.model.FilterOperator.LE: 对应 le
  • sap.ui.model.FilterOperator.Contains: 对应 substringof
  • sap.ui.model.FilterOperator.StartsWidth: 对应 startswith
  • sap.ui.model.FilterOperator.EndsWith: 对应 endswith

基于oDataModel实现筛选

read() 方法的 filters 属性

oDataModelread() 方法中 filters 属性可以对请求数据进行筛选。先给出代码:

// application model
var sServiceUrl = "https://cors-anywhere.herokuapp.com/" 
                + "http://services.odata.org/V3/Northwind/Northwind.svc/";
var oModel = new sap.ui.model.odata.v2.ODataModel(sServiceUrl);
oModel.setUseBatch(false);
sap.ui.getCore().setModel(oModel);

// define filters
var aFilters = [
    new sap.ui.model.Filter("ProductName", 
            sap.ui.model.FilterOperator.Contains,
            "Chocolate")
];

// get data using filter
oModel.read("/Products", {
    filters: aFilters,     
    success: function(oData, oResponse){
        console.log(oData);
    }
});         
  • 代码说明:
    • new sap.ui.model.Filter('path', operator, queryValue) 实例化 sap.ui.model.Filter 对象,每一个对象代表一个筛选的条件。比如上面的代码中,筛选条件为 ProductName 包含 Chocolate。

    • oDataModelread() 方法包含 filters 属性,这个属性是为sap.ui.model.Filter 实例的数组,代表一个筛选条件或多个筛选条件的组合。

在 Chrome 浏览器中执行,然后通过 F12 查看 Console 页面的输出,可以看到如下内容:

Northwind data service 产品中只有一个名称含有 Chocolate 的 产品,所以返回的数组中只有一个值。

切换到 Network 页面,可以看到,当执行 read() 方法时,向服务器提交的请求包含 $filter

在右边的 Headers 页签,如果我们浏览到最下面,可以清楚地看到 Query String Parameters:

说一说请求的 Batch 模式。Batch 模式指在发送 Http Request 的时候,框架自动合并请求和响应 (Response), 从而减少网络通讯的次数,提高性能。在实际应用的代码中,一般都应该使用Batch 模式。但在开发和代码跟踪的时候,通过oModel.setUseBatch(false); 设置不使用 Batch 模式,有利于查看和分析 Http 请求和响应。

多条件筛选

oDataModel.read() 方法中 filters 属性是 sap.ui.model.Filter数组,如果多个筛选组合在一起,这些筛选之间默认是 and 关系,如果需要用 or 关系,需要实例化一个新的 Fiter 对象,并且将第二个参数设为 false。下面的代码在 Products 中筛选出以 C 开头 或以 O 开头 的 产品名称:

// application model
var sServiceUrl = "https://cors-anywhere.herokuapp.com/" 
                + "http://services.odata.org/V3/Northwind/Northwind.svc/";
var oModel = new sap.ui.model.odata.v2.ODataModel(sServiceUrl);
oModel.setUseBatch(false);
sap.ui.getCore().setModel(oModel);

// 多条件筛选
var oProductFilter1 = new sap.ui.model.Filter(
    "ProductName",
    sap.ui.model.FilterOperator.StartsWith,
    "C"
);

var oProductFilter2 = new sap.ui.model.Filter(
    "ProductName",
    sap.ui.model.FilterOperator.StartsWith,
    "O"
);

// 实例化一个新的Filter, 参数2为false
var oFilterGroup = new sap.ui.model.Filter([oProductFilter1, oProductFilter2], false);
var aFilters = [oFilterGroup];

// get data using filter
oModel.read("/Products", {
    filters: aFilters,     
    success: function(oData, oResponse){
        console.log(oData);
    }
});     

数据绑定中实现筛选

通过控件的数据绑定,筛选需要用到 sap.ui.model.ListBindg 类的 filter() 方法。运行后的界面如下:

在 SearchField 中输入条件,点击放大镜,将按条件进行筛选。先给出完整代码:

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>

        <script src="../../resources/sap-ui-core.js"
                id="sap-ui-bootstrap"
                data-sap-ui-libs="sap.m"
                data-sap-ui-theme="sap_bluecrystal">
        </script>
        <!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->

        <script>
        
            // application model
            var sServiceUrl = "https://cors-anywhere.herokuapp.com/" 
                            + "http://services.odata.org/V3/Northwind/Northwind.svc/";
            var oModel = new sap.ui.model.odata.v2.ODataModel(sServiceUrl);
            oModel.setUseBatch(false);
            sap.ui.getCore().setModel(oModel);
            
            // 按选择条件执行筛选
            onFilterProducts = function(oEvent){
                var sQueryVal = oEvent.getParameter("query");               
                var aFilters = [];
                
                if (sQueryVal){
                    var oProductFilter = new sap.ui.model.Filter(
                            "ProductName",
                            sap.ui.model.FilterOperator.Contains,
                            sQueryVal);
                    aFilters.push(oProductFilter);
                }
                
                var oList = sap.ui.getCore().byId("ProductList");
                var oBinding = oList.getBinding("items");

                oBinding.filter(aFilters);
            }
            
            
            sap.ui.getCore().attachInit(function(){
                var oList = new sap.m.List({
                    id: "ProductList",
                    width: "auto"
                });
                
                oList.setHeaderToolbar(new sap.m.Toolbar({
                    title: "库存产品清单",
                    content: [
                       new sap.m.ToolbarSpacer(),
                       new sap.m.SearchField({width: "50%", search: onFilterProducts})
                    ]
                }));
                
                oList.bindItems({
                    path: "/Products",
                    template: new sap.m.ObjectListItem({
                        title: "{ProductName}",
                        number: "{UnitPrice}",
                        numberUnit: "EUR"
                    })
                });
                
                var oPage = new sap.m.Page({
                    title: "oDataModel 筛选测试",
                    content: [oList]
                });
                
                var oApp = new sap.m.App({
                    initialPage: oPage
                });
                
                oApp.addPage(oPage);
                oApp.placeAt("content");        
            });         
            
        </script>

    </head>
    <body class="sapUiBody" role="application">
        <div id="content"></div>
    </body>
</html>

核心代码在 onFilterProducts 函数中:

  • oEvent.getParameter('query') 获取查询的值

  • var oBinding = oList.getBinding("items");获取 sap.ui.model.ListBinding对象,然后通过 oBinding.filter() 方法,向服务器提交请求,包含 $filter 查询参数,从而执行筛选。

取消筛选

用户在 SeachField 中清除筛选条件界面重新加载所有的产品,也就是取消筛选。原因在于当 aFilters 数组被清空,oBindingaFilters 属性为 null, filter() 方法就取消了筛选。

参考

filter method of sap.ui.model.binding

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,980评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,178评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,868评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,498评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,492评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,521评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,910评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,569评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,793评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,559评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,639评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,342评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,931评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,904评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,144评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,833评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,350评论 2 342

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,380评论 25 707
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,016评论 4 62
  • 李斌,王珂,张小吉,是大学同学而且是一个宿舍的舍友,08年毕业离开学校,吃散伙饭的时候三个人依依不舍抱头痛哭。 李...
    淘汽十一郎阅读 619评论 3 5
  • 再不舍得还是要走了,新的旅程而已,不能辜负这些离别,严格要求自己! 1.每天早起,不要把时间都浪费在床上 2.放下...
    哭着说爱让人紧张阅读 120评论 0 0
  • 写在前面的话:一直想抽空去看八十出头的老嫂子,因为种种原因,一直耽搁了,虽然她家离我家步行只有十几分钟。总以为会有...
    魏林阅读 1,185评论 3 7