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

底

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

で私の追加を除いて同じであるこの演習の目的は、/マスターを可能にしてきましたマスターテーブルの行が選択されたときに詳細が変更される同じページ内の詳細表示を選択します。以下に示すように、ラジオ・ボタンを表の最初の列に配置し、ラジオ・ボタンをクリックすると、ポートレット内のアクション・メソッドが起動され、行の選択および関連する詳細が更新されます。

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.getData("yui3-record")); 
}, '#productsTable', 'tr', myDataTable);