<script type="text/javascript" src="/**javascript-path**/prototype.js"></script> <script type="text/javascript" src="/**javascript-path**/jaxson.js"></script>'javascript-path'の部分は環境に合わせて変更してください。 そのHTMLが使用するその他のJavaSctiptはこの後に記述します。
| doAction | アクションを実行します。 |
| doForm | フォームの内容をパラメータとしてアクションを実行します。 |
| toAttributeArrays | オブジェクトの配列からオブジェクトの属性を配列として保持するひとつのオブジェクトを作成します。 |
| forward | 初期データをセットしてページを移動します。 |
| formToObject | フォームの内容を格納するオブジェクトを構築します。 |
| pushObject | オブジェクトをセッションに保存します。 |
| pushForm | フォームの内容をセッションに保存します。 |
| popObject | セッションに保存したオブジェクトを取得します。 |
| popPageData | セッションに保存したオブジェクトを取得してページに読込みます。 |
| loadToDocument | オブジェクトをページに読込みます。 |
| setElementValue | HTML要素に値をセットします。 |
| setSelectValue | オブジェクトをSELECT要素に読込みます。 |
| createTableRows | オブジェクトの配列をテーブルに読込みます。 |
| createListItems | 配列をリストに読込みます。 |
| toAbsolutePath | 相対パスを絶対パスに変換します。 |
| toActionPath | アクション名を絶対パスに変換します。 |
| イベントハンドラ | イベント発生時に呼ばれる定義済の関数です。 |
| trim | 文字列の前後の空白を削除します。 |
| ltrim | 文字列の先頭の空白を削除します。 |
| rtrim | 文字列の最後の空白を削除します。 |
| toCashString | 数値を3桁ごとにカンマを付加した文字列を作成します。 |
| numberValue | 数値を表現するカンマ付き文字列の数値を取得します。 |
| setupFilteredField | テキストフィールドの入力を指定したパターンに強制するように設定します。 |
| setupCashField | テキストフィールドを金額入力用に設定します。 |
| validateDate | 日付の妥当性を検証します。 |
doAction('SearchCustomer', { costomerID : "0001" }, function(customerList) {
setElementValue($("customerTable"), customerList);
});
forward("nextPage.html", nextPageData);
pushObject(toAbsolutePath("foo.html"), obj, function() {
location = "foo.html";
});
金額 : <span id="money"></span>
<script type="text/javascript">
<!--
$("money").valueFilter = function(value) {
return toCashString(value);
}
//-->
</script>
金額 :
<select id="testSelect">
</select>
<script type="text/javascript">
<!--
// SELECT要素にOPTIONの内容を設定する関数をセット
$("testSelect").optionCreated = function(index, option, data) {
option.value = data.userid;
option.innerHTML = data.username;
};
// テスト用のオプションデータ
var optionData = [
{ userid : "0001", username : "東京一郎" },
{ userid : "0002", username : "山田太郎" },
];
// SELECTにテストデータをセットします。
function setOptions() {
setSelectValue($("testSelect"), optionData);
}
//-->
</script>
<table id="testTable" border="1">
<thead>
<tr>
<td id="col1">列1</td>
<td id="col2">列2</td>
<td id="col3">列3</td>
<td id="col4">列4</td>
</tr>
</thead>
<tbody></tbody>
</table>
<script type="text/javascript">
<!--
// テスト用のテーブルデータ
var tableData = [
{col1 : "行1列1", col2 : "行1列2", col3 : "行1列3", col4 : "行1列4" },
{col1 : "行2列1", col2 : "行2列2", col3 : "行2列3", col4 : "行2列4" },
{col1 : "行3列1", col2 : "行3列2", col3 : "行3列3", col4 : "行3列4" },
{col1 : "行4列1", col2 : "行4列2", col3 : "行4列3", col4 : "行4列4" },
{col1 : "行5列1", col2 : "行5列2", col3 : "行5列3", col4 : "行5列4" }
];
// テーブルにテストデータをセットします。
function setTable() {
createTableRows($("testTable"), tableData);
}
//-->
</script>
列1
列2
列3
列4
テーブル要素に'rowInserted'という属性名で関数を設定しておくと
行が追加される毎にその関数が呼ばれます。
但しこの関数の引数としてrowInsertedを指定した場合は
こちらが実行されてテーブル要素にセットした関数は呼ばれません。
<table id="testTable" border="1">
<thead>
<tr>
<td id="col1">列1</td>
<td id="col2">列2</td>
<td id="col3">列3</td>
<td id="col4">列4</td>
</tr>
</thead>
<tbody></tbody>
</table>
<script type="text/javascript">
<!--
// 行毎の処理
$("testTable").rowInserted = function(rowIndex, rowElement, rowData) {
if (rowIndex % 2) {
Element.setStyle(rowElement, {color : "red" });
}
}
// セル毎の処理
$("testTable").cellInserted =
function(rowIndex, cellIndex, cellElement, rowData, id, cellValue) {
if (cellIndex == 3) {
var t = document.createElement("input");
t.type = "text";
t.value = cellValue;
return t;
}
}
// テーブルにテストデータをセットします。
function setTable() {
createTableRows($("testTable"), tableData);
}
//-->
</script>
列1
列2
列3
列4
<ol id="list"></ol>
<script type="text/javascript">
<!--
$("list").itemInserted = function(index, item, value) {
var t = document.createElement("input");
t.type = "text";
t.id = "list" + index;
t.value = value;
return t;
}
function buttonClicked(array) {
createListItems($("list"), array);
}
//-->
</script>
リストアイテムテスト
// <div id="message"></div>にメッセージを表示する
function onActionError(errorInfo) {
var exception = errorInfo.ERROR;
if (exception.class == 'SQLException') {
var message = "データベースエラーが発生しました。エラーコード : " + exception.errorCode;
$("message").innerHTML = message;
}
}
function errorHandler(requester, request, exception) {
if (exception) {
alert(requester.url + " の呼出で例外が発生しました。\n" + exception);
} else {
alert(requester.url + " の呼出に失敗しました。\nステータス : " + request.status);
}
}
<input id="filteredField" type="text"/>
<script type="text/javascript">
<!--
setupFilteredField($("filteredField"), /^[0-9]{0,2}$/, null);
//-->
</script>
keyupFuncにはこのフィールドが引数として渡されます。
金額入力 <input id="cashField" type="text"/>
<script type="text/javascript">
<!--
setupCashField($("cashField"), null);
//-->
</script>
金額入力
keyupFuncにはこのフィールドが引数として渡されます。