使用Liferay AUI数据表选择行

我有一个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>

';
}
}, {
标签：'基数'，
键：'基数'，
可排序：正确
} ];
新的A.DataTable({
栏目：roleColumns，
行选择：“鼠标向下”，
数据：，
可滚动：“xy”，
高度：“400px”，
宽度：“100%”，
排序：'真'，
highlightRows：对
}).plug（A.Plugin.DataTableSelection{
selectRow：true
}).render（“#productsTable”）；

我强烈怀疑这不是一种“正确”的方法，但是我能够隔离在这段代码上单击的行的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.getData("yui3-record"));
}, '#productsTable', 'tr', myDataTable); 

---

本练习的目的是允许在同一页面中显示主/明细，其中明细会随着主表中的行而更改。我选择在表的第一列中放置一个单选按钮，如下所示，单击单选按钮调用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>';
    }
},
....
];

var列=[
{
标签：“”，
可排序：false，
allowHTML:是的，
格式化程序：函数（o）{
如果（o.data.isSelected）
返回“”；
var renderURL=Liferay.PortletURL.createURL（“”）；
renderURL.setParameter（'productLineItemRoleId'，o.data.id）；
返回“”；
}
},
....
];

我知道最好的解决方案是使用javascript只动态更新页面的某些部分，而不是在每次单击单选按钮时执行表单发布。但这在目前是可行的，我可以继续讨论更紧迫的问题；）

谢谢，

---

兰迪

谢谢你的建议。不幸的是，上述方法对我不起作用。我确实发现了一些小的变化，但选择了另一种解决方案（见下一篇文章）。

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>';
    }
},
....
];