![[iret-ceo] アイレット株式会社CEOブログ](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNtlpY4hybCLIvXlnPrFzV_-3eASj3q1S_AfNnFC4tnHdAt8TSwSQ3Az2T2JgAwaf5bn8DnhZr_yw0ZZ4RdvoWjSKZQINT2gUJ6IotSKT9PkvNPRnp6Fc2nyZNCEWUV3g_tma-DRaobKRM/s1600/blog.jpg)
![スカウター : [iret-ceo] アイレット株式会社CEOブログ](http://jaicon.webscouter.net/icon.phtml?u=http%3A%2F%2Firet-ceo.blogspot.com%2F){kind=icon}
またTeeda AjaxとJQueryを使ったサンプルです。
テーブルの行の追加を何とか実装したくてJQueryを使うことにしました。
ちょっとソースは汚いですが、まだまだ効率化できるはず。
テーブルのデザイン等はスタイルシートをあてて表示
リストがしましまになるようにループ時に別のスタイルシートをあてるようにしました。
例として ポイント付与するプログラムです。
下記がHTMLの例です。
--------------------------------------------------------------------------------------------------------------------
<html xml:lang="ja" lang="ja"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:te="http://www.seasar.org/teeda/extension"
xmlns:x="http://myfaces.apache.org/tomahawk">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javaScript" src="../js/ajax.js"></script>
<script type="text/javaScript" src="../js/jquery.js"></script>
<script type="text/javascript">
<!--
function usersearch_entryPage_ajaxAddPoint(res){
var totalpoint = 0;
// ローディングをクリア
$('#result').empty();
tbody = document.getElementById("Items");
$(tbody).empty();
// 検索結果をループで回す
for( i=0; i < res.length; i++ ) {
var entry = res[i];
var tr = document.createElement( 'tr' );
if(i % 2 == 0) $(tr).addClass("list1");
else $(tr).addClass("list2");
tbody.appendChild( tr );
// 日時（date）のセル
var tddate = document.createElement( 'td' );
$(tddate).text( entry.pointinststamp );
$(tddate).addClass("S3");
tr.appendChild( tddate );
// 種別 userPointType
var tdtype = document.createElement( 'td' );
var type = "";
if(entry.userpointtype == 1)type = "登録ポイント";
if(entry.userpointtype == 2)type = "予約ポイント";
if(entry.userpointtype == 3)type = "クチコミポイント";
if(entry.userpointtype == 4)type = "特別ポイント";
if(entry.userpointtype == 5)type = "使用済みポイント";
$(tdtype).text( type );
$(tdtype).addClass("S3");
tr.appendChild( tdtype );
// ポイントのセル
var tdpoint = document.createElement( 'td' );
$(tdpoint).text( entry.userpoint );
$(tdpoint).addClass("S3");
tr.appendChild( tdpoint );
totalpoint = totalpoint + entry.userpoint;
// タイトル(title)＋リンク(link)のセル
var tdlink = document.createElement( 'td' );
$(tdlink).addClass("S3");
var center = document.createElement( 'center' );
tdlink.appendChild( center );
var a = document.createElement( 'a' );
$(a).text( "削除" );
a.href = "javascript:deletePoint(" + entry.userpointid + ")" ;
center.appendChild( a );
tr.appendChild( tdlink );
}
// 合計を表示する
document.getElementById("totalpoint").innerHTML = totalpoint;
document.getElementById("point").value = 0;
}
function addPoint(){
tbody = document.getElementById("Items");
$(tbody).empty();
// ローディングを表示
$('#result').empty().append( '<img src="../img/loading.gif" />' );
var form = Kumu.FormHelper.create('entryForm');
point = document.getElementById("point").value;
userId = form["entryForm:userId"];
if(point == undefined || point == "")point = 0;
Kumu.Ajax.executeTeedaAjax(usersearch_entryPage_ajaxAddPoint,
[userId,point], Kumu.Ajax.RESPONSE_TYPE_JSON);
}
function usersearch_entryPage_ajaxDeletePoint(){
addPoint();
}
function deletePoint(userPointId){
$('#result').empty().append( '<img src="../img/loading.gif" />' );
var form = Kumu.FormHelper.create('entryForm');
userId = form["entryForm:userId"];
Kumu.Ajax.executeTeedaAjax(usersearch_entryPage_ajaxDeletePoint,
[userPointId,userId], Kumu.Ajax.RESPONSE_TYPE_JSON);
}
-->
-->
</script>
<style>
.onTeedaError {
background-color: #FFCCCC;
}
.must{
color: #F00;
font-size: 10px;
font-weight: bold;
}
.list2 td {
background:#EEEEEE;
}
.list1 td {
background:#FFFFFF;
}
</style>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"
onLoad="javascript:addPoint()">
<form id="entryForm">
<table width="800" border="0" cellspacing="0" cellpadding="0">
<tr valign="top">
<td>
<table width="750" border="0" cellspacing="1" cellpadding="3" >
<tr style="background:#a7dafd;">
<th width="150" height="25" class="S3" >ポイント合計</th>
<td class="S3" style="background:#EEEEEE;">
<span id="totalpoint">3,000</span> ポイント
</td>
<th width="150" height="25" class="S3" >特別ポイント付与</th>
<td class="S3" style="background:#EEEEEE;">
<input type="text" id="point" size="5"
value="0"/> <input type="button"
onClick="javascript:addPoint()" value="ポイント付与" /><br />
</td>
</tr>
</table>
<center><p id="result"></p></center>
<p id="url"></p>
<table width="750" border="0" cellspacing="1" cellpadding="3">
<thead>
<tr style="background:#a7dafd;">
<th width="150" class="S3">
日付<br />
</th>
<th width="250" class="S3">
種別<br />
</th>
<th width="200" class="S3">
ポイント<br />
</th>
<th width="150" class="S3">
削除<br />
</th>
</tr>
</thead>
<tbody id="Items">
</tbody>
</table>
</td>
</tr>
</table>
</form>
</body>
</html>
--------------------------------------------------------------------------------------------------------------------
Teeda Ajax
// 抜粋
public String ajaxAddPoint(int userId,int point){
this.userId = userId;
if(point > 0){
// データのインサート
usersearchLogic.insertUserPoint(userId,point,"shouhei");
}
// 一覧取得
usersearchLogic.findUserPoint(this);
// JSON形式でリストを返す
return JSONSerializer.serialize(this.userPointList);
}
0 comment:
コメントを投稿