SAPUI5 sap.ui.table.Table单击事件

时间:2014-11-05 11:02:23

标签: javascript jquery html5 sapui5

我创建了一个表是SAPUI5,现在我想让一个单元格可点击。这是我的表

var oTable = new sap.ui.table.Table({

            visibleRowCount: 4,
            firstVisibleRow: 3,
            editable: false,
            rowHeight:40,
            align:"center",
            width:"100%",
            rowBorderStyle:"none",
            styleExpression :"color:white;",
            selectionMode: sap.ui.table.SelectionMode.Single,

         });

         //Define the columns and the control templates to be used
         var oColumn = new sap.ui.table.Column({
            label: new sap.ui.commons.Label({text: "RequestID"}),
            styleExpression :"'padding:10px 10px 10px 10px;'",
            template: new sap.ui.commons.TextView().bindProperty("text","RequestID"),
            sortProperty: "RequetID",
            filterProperty: "RequetID",
            width: "75px",
            hAlign: "Center"
         });

         oTable.addColumn(oColumn);
         oTable.addColumn(new sap.ui.table.Column({
            label: new sap.ui.commons.Label({text: "First Name"}),
            template: new sap.ui.commons.TextField().bindProperty("value","name"),
            sortProperty: "name",
            filterProperty: "name",
            width: "75px",
            hAlign: "Center"
         }));
         oTable.addColumn(new sap.ui.table.Column({
            label: new sap.ui.commons.Label({text: "Subject"}),
            template: new sap.ui.commons.TextField().bindProperty("value","Summary"),
            sortProperty: "Summary",
            filterProperty: "Summary",
            width: "100px",
            hAlign: "Center"
         }));
         oTable.addColumn(new sap.ui.table.Column({
            label: new sap.ui.commons.Label({text: "Attachment"}),
            template: new sap.ui.commons.Image().bindProperty("src", "src"),
            sortProperty: "src",
            filterProperty: "src",
            width: "75px",
            hAlign: "Center",

         }));
         oTable.addColumn(new sap.ui.table.Column({
            label: new sap.ui.commons.Label({text: "Create Date"}),
            template: new sap.ui.commons.TextField().bindProperty("value", "CreateDate"),
            sortProperty: "CreateDate",
            filterProperty: "CreateDate",
            width: "75px",
            hAlign: "Center",

         }));
         var oColumn=new sap.ui.table.Column({
                label: new sap.ui.commons.Label({text: "Info"}),
                template: new sap.ui.commons.Image().bindProperty("src", "src1"),
                sortProperty: "src1",
                filterProperty: "src1",
                width: "75px",
                hAlign: "Center",
                addStyleClass: "infoimg",
             });
         oColumn.attachEvent("click",function cl(){alert("hi");});
         oTable.addColumn(oColumn);
         oTable.addColumn(new sap.ui.table.Column({
                label: new sap.ui.commons.Label({text: "Status"}),
                template: new sap.ui.commons.TextField().bindProperty("value", "Status"),
                sortProperty: "Status",
                filterProperty: "Status",
                width: "75px",
                hAlign: "Center"
             }));

这是我与表格结合的数组

var aData = [
                    {RequestID: 1, name: "Al",  Summary: "False Trading",  src: "images/docc.png", CreateDate: "21/08/2014", src1: "images/icn_info_unselected.png", Status: "Open"},
                    {RequestID: 27, name: "Andy",  Summary: "Invalid Transaction",  src: "images/pdff.png", CreateDate: "23/08/2014", src1: "images/icn_info_unselected.png", Status: "Open"},
                    {RequestID: 39, name: "Anita",  Summary: "False Trading",  src: "images/docc.png", CreateDate: "24/08/2014", src1: "images/icn_info_unselected.png", Status: "Open"},
                    {RequestID: 67, name: "Doris",  Summary: "Invalid Transaction",  src: "images/pdff.png", CreateDate: "25/08/2014", src1: "images/icn_info_unselected.png", Status: "Close"}
                 ];

这里我想在info列中使用clickable.i尝试使用jquery和javascript。

JQUERY: -

$('#__image2-col5-row0').click(function() 
            {
                alert("hi");
            });

JAVASCRIPT: -

    var a=document.getElementById('__image2-col5-row0');
    alert(a);
     a.attachEvent('click',  function() {
        alert('Hello world');
    });

这两种方法都不起作用.Javascript返回" a" as null。SAPUI5有一种内置的方式来添加事件处理程序,如点击表格单元格

请帮助

1 个答案:

答案 0 :(得分:3)

sap.ui.commons.Image有一个press事件。

var oColumn=new sap.ui.table.Column({
            label: new sap.ui.commons.Label({text: "Info"}),
            template: new sap.ui.commons.Image({
                 press:function(){alert("hi");}}
            ).bindProperty("src", "src1"),
            sortProperty: "src1",
            filterProperty: "src1",
            width: "75px",
            hAlign: "Center",
            addStyleClass: "infoimg",
         });