使用 Liferay AUI 数据表进行行选择

Question

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

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

<div id="productsTable"></div>

<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');

    </aui:script>

Answer 1

我强烈怀疑这不是 "correct" 的方法 - 但是我能够隔离在此代码上单击的行的 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);

Answer 2

此练习的目的是允许 master/detail 在同一页面中显示，其中详细信息会随着主 table 中的一行被选中而发生变化。我选择在 table 的第一列中放置一个单选按钮，如下所示，单击单选按钮会调用 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 仅动态更新页面的某些部分，而不是在每次单击单选按钮时执行表单 -post。但这暂时有效，我可以继续处理更紧迫的问题 ;)。

谢谢，兰迪

使用 Liferay AUI 数据表进行行选择

row selection with Liferay AUI datatable

liferay

liferay-aui