根据输入搜索 SAPUI5 的值检查表行 [英] Check table row based on value of input search SAPUI5

问题描述

我有一个带有搜索字段的表格(多选模式).有没有办法，当我搜索时，搜索结果的值会自动检查表中对应的行.最初我虽然可以搜索，然后如果结果长度为 1，则在表上执行 getItems() 并在第一行执行 setSelected = true.该行被选中，但是当我退出搜索时，该行被取消选中.

I have a table (multiselect mode) with a search field. Is there a way that when I search, the value of the search result will automatically check the corresponding row in the table. Initially I though I could just search and then if the result length is 1, do a getItems() on the table and setSelected = true on the first row. The row gets selected, but when I exit the searching, it the row get deselected.

        var oSerialTable = new sap.m.Table({
            mode: sap.m.ListMode.MultiSelect,
            columns: [
                ...
            ],
            items : {
                    path : "/results",
                    template: new sap.m.ColumnListItem({
                        cells: [
                        new sap.m.Text({ text: "{Sernr}" }),
                        new sap.m.Text({ text: "{Equnr}" }),
                        new sap.m.Text({ text: "{Lbbsa}" })
                        ]
                      })
            },
            select : function(evt){

            },
            updateFinished: function(){
                var aItems = oTable.getItems(); 
                console.log(aItems);
                if (aItems.length == 1){
                console.log(aItems[0]);
                aItems[0].setSelected(true)
                }

            }
        });

        oSerialTable.setModel(ocheckSerialBatchJsonModel);


        var oSerialTableSearch = new sap.m.SearchField({

            search: function(oEvent){

            var filterValue = oEvent.getSource().getValue();
            var aFilter = new sap.ui.model.Filter("Sernr", sap.ui.model.FilterOperator.EQ, filterValue);
            var oItemTemplate = new sap.m.ColumnListItem({
                cells: [
                    new sap.m.Text({ text: "{Sernr}" }),
                        new sap.m.Text({ text: "{Equnr}" }),
                        new sap.m.Text({ text: "{Lbbsa}" })


                ]
            });

                oSerialTableSearch.bindItems({path:"/SerialSet", template:oItemTemplate, filters: [aFilter]});


            }

        });

推荐答案

如果绑定 selected 属性 的 ColumnListItem 到您的模型.然后，您可以对模型数据执行过滤和选择:

This gets much easier if you bind the selected property of the ColumnListItem to your model. You can then perform the filtering and selection on your model data:

    ...      
                 template: new sap.m.ColumnListItem({
                    cells: [
                    new sap.m.Text({ text: "{Sernr}" }),
                    new sap.m.Text({ text: "{Equnr}" }),
                    new sap.m.Text({ text: "{Lbbsa}" })
                    ],
                    selected: "{selected}" //Bind selection to model
                  })

    ...

    var oSerialTableSearch = new sap.m.SearchField({
       search: function(oEvent){
           var filterValue = oEvent.getSource().getValue();
           var array = ocheckSerialBatchJsonModel.getProperty("/results");
           array.forEach(function(item){
              //update selected state of each item
              item.selected = (item.Sernr == filterValue || item.Equnr == filterValue || item. Lbbsa === filterValue);
           });
           ocheckSerialBatchJsonModel.setProperty("/results",array); //Write back to Model to update bindings
        }
    });

以您在 JSBin 上的代码为例.

Example with your code on JSBin.

这篇关于根据输入搜索 SAPUI5 的值检查表行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！