tableProxyについて

tableコンポーネントのプロキシ属性により、クライアント・サイドでJavaScriptを使用して表の操作を実行できるかどうかを決定するブール値が指定されます。trueに設定されていれば、クライアントでのレンダリング時にJavaScriptプロキシ・コード(TableProxy JavaScriptオブジェクト)が表に組み込まれます。


...
<table proxied="true">
  ...
  ...
</table>
...    

入力要素の読取りおよび書込み

次のUIX XMLのサンプル・コードでは、TableProxyを使用して表の要素を読み込んで、列のすべての値を合計し、その合計を更新しています。


...
<dataScope>
  <provider>
    <data name="tableData">
      <inline>
        <row name="Person 1" cost="11" />
        <row name="Person 2" cost="12" />
        <row name="Person 3" cost="13" />
        <row name="Person 4" cost="14" />
        ...
      </inline>
    </data>
  </provider>
  <contents>
    <form name="form1">
      <contents>
        <table proxied="true" tableData="${uix.data.tableData.row}"
               id="table1" ... >
          <contents>
            <column>
              <columnHeader>Name</columnHeader>
              <contents>
                <text text="${uix.current.name}"/>
              </contents>
            </column>
            <column>
              <columnHeader>Cost</columnHeader>
              <contents>
                <textInput name="cost" text="${uix.current.cost}"/>
              </contents>
            </column>
          </contents>
          <footer>
<tableFooter>
<total>
<totalRow destination="javascript:updateTotal();">
<contents>
<textInput name="total" text="50"/>
</contents>
</totalRow>
</total>
</tableFooter>
</footer> </table> </contents> </form> </contents> </dataScope> ...
「再計算」ボタンをクリックすると、updateTotal() JavaScriptメソッドがコールされます。このメソッドでは、新規のTableProxyが表のIDを使用して作成され、getLength()メソッドをコールすることによって表の行数が取得されます。さらに、(各行に対して)列のform要素が取得され、値が合計され、適切なテキスト・フィールドにその合計が書き込まれます。getFormElement(...)メソッドでは、要素名と行の索引が取得されてその要素が返されます。

Example:

function updateTotal()
{
  var proxy = new TableProxy('table1');
  var rowCount = proxy.getLength();
  var total = 0;
  for(var i=0; i<rowCount; i++)
  {
    var currTextField = proxy.getFormElement('cost', i);
    // the minus zero here is necessary to convert the string value
    // to a number
    total += currTextField.value - 0;
  }
  document.form1.total.value = total;
}    

singleSelectionの使用

単一選択モードで使用されている表では、TableProxyのgetSelectedRow()メソッドを使用して、現在選択されている行の索引を取得できます。次に例を示します。


Example:

function hire()
{
  var proxy = new TableProxy('table1');
  var row = proxy.getSelectedRow();
  // check to make sure that something was selected
  if (row < 0)
  {
    alert('You have not chosen anyone!');
  }
  else
  {
    var name = proxy.getFormElement('theName', row).value;
    alert('You have chosen to hire '+name);
  }
}    

この関数は、次のUIX XMLによりコールされます。


...
<table name="table1" ...>
  <tableSelection>
    <singleSelection ...>
      <contents>
        <button text="Hire" destination="javascript:hire()"/>
      </contents>
    </singleSelection>
  </tableSelection>
  <contents>
    <column>
      <columnHeader>Name</columnHeader>
      <contents>
        <text text="${uix.current.name}"/>
      </contents>
    </column>
    <column>
      <columnHeader>Name</columnHeader>
      <contents>
        <text text="${uix.current.cost}"/>
      </contents>
    </column>
    <formValue name="theName" value="${uix.current.name}"/>
  </contents>
</table>
...    

同様に、TableProxyに対してgetSelectedRows()メソッドを使用して、複数選択モードで選択された行索引を取得します。このメソッドは配列を返します。配列の各要素は、選択された行の索引です。次に、JavaScriptコードのサンプルを示します。


Example:

function recruit()
  {
  var proxy = new TableProxy('table1');
  var rows = proxy.getSelectedRows();
  var length = rows.length;
  // make sure that something was selected
  if (length > 0)
  {
  var list = "";
  // loop through each selected row and concatenate the name
  for(var i=0; i < length; i++)
  {
  // get the next selected row index
  var row = rows[i];
  // get the selected row (from the index) and pull out the name
  var name = proxy.getFormElement('theName', row).value;
  list += '\n'+name;
  }
  alert("You have chosen to recruit "+list);
  }
  else
  {
  alert("You have not chosen anyone to recruit!");
  }
  }    

このメソッドは、次のUIX XMLからコールされます。


...
<table ... >
  <tableSelection>
    <multipleSelection text="Select ...">
      <contents>
        <button text="Recruit" destination="javascript:recruit()"/>
      </contents>
    </multipleSelection>
  </tableSelection>
  ...
</table>
...    

tableとその名前付きの子について

singleSelectionまたはmultipleSelection(tableSelection)の使用
tableコンポーネントの使用

 

Copyright © 1997, 2004, Oracle. All rights reserved.