Question

我在ui5应用程序中使用 sap.m.TableSelectDialog 控件。我的要求是根据列选择过滤数据。

首先用户选择该列，然后在搜索栏中输入与所选列相关的搜索字符串。

问题：我无法在sap.m.TableSelectDialog中选择列。

我浏览了多个博客，找到了一些相关的代码，并使用这些代码尝试扩展sap.m.TableSelectDialog控件。

但对于我来说， sap.m.TableSelectDialog 不会触发 onAfterRendering ，但是它适用于 sap.m.Table 。 / p>

请对此进行指导。

参考网址：https://gist.github.com/dennisseah/9e231fd49893a46e5c70

代码：（扩展的sap.m.TableSelectDialog控件）：`

<!DOCTYPE HTML>
<html>
<head>

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<script id="sap-ui-bootstrap" 
    type="text/javascript"
    data-sap-ui-libs="sap.m"
    data-sap-ui-theme="sap_bluecrystal" 
    src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js">
</script>

<script>
jQuery(function() {
    sap.m.TableSelectDialog.extend('ColumnClickableTable', {
        metadata: {
            events : {
                columnPress: {}
            }
        },

        renderer: function(oRm, oControl) {
            sap.m.TableSelectDialogRenderer.render(oRm, oControl);
        },

        onAfterRendering: function() {
            var that = this;

            function colClick(idx, col) {
                col.css('cursor', 'pointer');
                col.children().each(function() {
                    $(this).css('cursor', 'pointer');
                });

                col.click(function() {
                    that.fireColumnPress({'columnIndex': idx});
                });
            }

            sap.m.TableSelectDialog.prototype.onAfterRendering.apply(this, arguments);
            var count = 0;
            this.$().find('th.sapMListTblCell').each(function() {
                colClick(count++, $(this));
            });
        }
    });
	var oButton= new sap.m.Button({
	text:"Open Table select Dialog",
	press:function(){
	
	oTable.open();
	}
	
	});
	
	oButton.placeAt("content");
	
    var oTable = new ColumnClickableTable({
       // mode: sap.m.ListMode.None,
        columns: [
            new sap.m.Column({
                header : new sap.m.Label({
                    text : "Last Name"
                })
            }),
            new sap.m.Column({
                header : new sap.m.Label({
                    text : "First Name"
                })
           })
        ],
        items: {
            path: "/", 
            template: new sap.m.ColumnListItem({
                cells : [ 
                    new sap.m.Text({text : "{lastName}"}), 
                    new sap.m.Text({text : "{firstName}"})
                ]
            })
        },
        columnPress: function(e) {
            console.log(e.getParameter('columnIndex'));
        }
    });

    var oModel = new sap.ui.model.json.JSONModel();
    var users = [];
    for (var i = 0; i < 4; i++) {
        users.push({lastName: 'lastName' + i,  firstName: 'firstName' + i});
    }
    oModel.setData(users);

    oTable.setModel(oModel);
    oTable.placeAt("content");
	

});
</script>

</head>
<body class="sapUiBody">
    <div id="content"></div>
</body>
</html>

如何根据SAPUI5中TableSelectDialog中的列选择过滤数据？

0 个答案: