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;
}
単一選択モードで使用されている表では、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>
...
singleSelectionまたはmultipleSelection(tableSelection)の使用
tableコンポーネントの使用
Copyright © 1997, 2004, Oracle. All rights reserved.