使用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

這項工作的目的是要允許主機的同一/詳細信息顯示在同一頁面中，其中詳細信息隨着主表中的一行被選中而改變。我選擇在表格的第一列放置一個單選按鈕，如下所示，然後單擊單選按鈕調用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動態更新僅在頁面的某些部分，而不是與每個單選按鈕點擊執行表單提交。但是現在這個工作，我可以繼續解決更緊迫的問題;）。

感謝， 蘭迪

Answer 2

我有一個強烈的懷疑，這是不是「正確」的方式做到這一點 - 但我能隔離被點擊此這段代碼行的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);