Liferay AUI数据表的行选择

时间:2017-06-13 21:57:41

标签: liferay liferay-aui

我有一个Liferay-AUI数据库,我想允许单行选择,并在选择每一行时进一步调用脚本。该脚本需要确定刚刚选择了哪一行并采取了一些措施。

以下是当前实施的示例。关于如何添加上述要求的建议将不胜感激。

EINTR

2 个答案:

答案 0 :(得分:0)

我强烈怀疑这不是“正确”的方法 - 但是我能够隔离这个代码点击的行的DOM节点。

<aui:script use="datatable,datatable-sort,datatable-scroll,datatable-highlight,datatable-selection,liferay-portlet-url">
        var roleColumns = [ {
            label : 'Providing Role Name',
            key : 'providerRoleName',
            sortable : true,
            allowHTML : true,
            formatter : function(o) {
                var renderURL = Liferay.PortletURL
                        .createURL('<%= productDetailUrl %>');
                renderURL.setParameter('productId', o.data.productId);
                return '<a href="' + renderURL.toString() + '">'
                        + o.data.providerRoleName + '</a>';
            }
        }, {
            label : 'Cardinality',
            key : 'cardinality',
            sortable : true
        } ];

        new A.DataTable({
            columns : roleColumns,
            rowSelect: 'mousedown',
            data : <%=renderRequest.getAttribute("roles")%>,
            scrollable : "xy",
            height : "400px",
            width : '100%',
            sort : 'true',
            highlightRows : true
        }).plug(A.Plugin.DataTableSelection, {
            selectRow : true
        }).render('#productsTable');

        A.delegate('click', function(e) {
            console.log(e.currentTarget.getDOMNode());
        }, '#productsTable', 'tr', myDataTable); 

    </aui:script>

除了我在底部添加

之外,一切都是一样的
A.delegate('click', function(e) {
    console.log(e.currentTarget.getDOMNode());
}, '#productsTable', 'tr', myDataTable); 

您还可以隔离数据集

A.delegate('click', function(e) {
    console.log(e.currentTarget.getData("yui3-record"));
}, '#productsTable', 'tr', myDataTable); 

答案 1 :(得分:0)

本练习的目的是允许在同一页面中显示主/详细信息,其中详细信息在主表格中的一行中更改。我选择在表格的第一列中放置一个单选按钮,如下所示,然后单击单选按钮会调用portlet中的操作方法来更新行选择和相关详细信息。

var columns = [
    {
        label : ' ',
        sortable : false,
        allowHTML : true,
        formatter : function(o) {
        if (o.data.isSelected)
            return '<img src="/html/icons/radiobutton-checked.png" width="15" height="15" border="0" />';
        var renderURL = Liferay.PortletURL.createURL('<%= partnerDetailUrl %>');
        renderURL.setParameter('productLineItemRoleId', o.data.id);
        return '<a href="' + renderURL.toString() + '"><img src="/html/icons/radiobutton-unchecked.png" width="15" height="15" border="0" /></a>';
    }
},
....
];

我理解最好的解决方案是使用javascript动态更新页面的某些部分,而不是在每个单选按钮点击时执行表单发布。但这暂时适用,我可以继续讨论更紧迫的问题;)。

谢谢, 好色