C# と VB.NET の質問掲示板

ASP.NET、C++/CLI、Java 何でもどうぞ

C# と VB.NET の入門サイト

Re[4]: ListViewのEditTemplateで一部分だけ編集


(過去ログ 50 を表示中)

[トピック内 5 記事 (1 - 5 表示)]  << 0 >>

■27659 / inTopicNo.1)  ListViewのEditTemplateで一部分だけ編集
  
□投稿者/ Tetu (1回)-(2008/11/11(Tue) 21:23:00)

分類:[.NET 全般] 

こんばんわ、いつもお世話になっています。

現在、VS2008でWeb開発をしており、ListViewを使用しているのですが、EditTemplateを使用し、選択した行を
編集可能な状態にするなどをしています。

そこで質問なのですが、編集時に、テーブルの中に複数あるイメージやラベルなどをクリックするとそのセルだけ編集可能な状態に
したいのですが、いい案が思い浮かびません。

何かいい方法などありますでしょうか?
引用返信 編集キー/
■27746 / inTopicNo.2)  Re[1]: ListViewのEditTemplateで一部分だけ編集
□投稿者/ はつね (873回)-(2008/11/13(Thu) 15:24:35)
はつね さんの Web サイト
No27659 (Tetu さん) に返信
> そこで質問なのですが、編集時に、テーブルの中に複数あるイメージやラベルなどをクリックするとそのセルだけ編集可能な状態に
> したいのですが、いい案が思い浮かびません。

・EditTemplateの各項目にそれぞれ、編集可能なコントロールと編集不可なコントロールを用意します(例えば、テキストとラベル)
・クリックした項目は編集可能なコントロールのVisibled=True、編集不可なコントロールのVisibled=Flase。他は逆に設定

とかでできないでしょうか(未確認)。

引用返信 編集キー/
■27747 / inTopicNo.3)  Re[2]: ListViewのEditTemplateで一部分だけ編集
□投稿者/ ま (158回)-(2008/11/13(Thu) 16:18:52)
> ■No27659 (Tetu さん) に返信
>>そこで質問なのですが、編集時に、テーブルの中に複数あるイメージやラベルなどをクリックするとそのセルだけ編集可能な状態に
>>したいのですが、いい案が思い浮かびません。

クリックしたときに編集状態にすればいいのでは?
編集した結果をどうやってサーバーに送るようにするか、ですけど、hidden が一番簡単ですね。
<input type=hidden id="行_桁_カラム名" value="xxx">

カラム内アイテムをクリックしたと同時に編集状態にするには、そのカラム表示内容を 予め
用意しておいた TextBox にペーストして、そのテキストBOXを表示して、フォーカスを移せば
OKですね。

で、フォーカスアウト or 改行入力 で編集完了として、テキストBOXを非表示にして、編集結果
を元のカラム位置に貼り付けて、hidden 要素を作成して、カラム名と行番号・カラム位置で名前を
作って、フォームの後ろに追加してあげればよさげです。

サーバー側にListView のカラム要素を取得する専用の Hidden 項目を列挙するクラスを用意して
おいて、そいつらに、Request を食わせれば、編集結果も取得出来ますね。

めんどくさいけど、もっと簡単な方法あるんかな?いちいちポストバックしないでやるならこーゆー
やり方で実装することになります、たぶん。


引用返信 編集キー/
■27748 / inTopicNo.4)  Re[3]: ListViewのEditTemplateで一部分だけ編集
□投稿者/ ま (159回)-(2008/11/13(Thu) 16:42:51)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD> 
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<TITLE>テーブルのカラムを編集可能にしてポストしちゃうさんぷる</TITLE>
<style>
td {
	height:24px;
}
</style>
</HEAD>
<BODY>
<form>
<table border onclick="EditStart()">
	<tr><th width=20>#</th><th width=100>Name</th><th width=200>Address</th></tr>
	<tr><td></td><td></td><td></td></tr>
	<tr><td></td><td></td><td></td></tr>
	<tr><td></td><td></td><td></td></tr>
	<tr><td></td><td></td><td></td></tr>
</table>
</form>
<script>

function EditStart() {

	var o = event.srcElement;
alert("OK:" + o.nodeName);
	
	var findTd = false;
	while (o.nodeName.toLowerCase() != "tr") {
		if (o.nodeName.toLowerCase() == "td") {
			findTd = true;
			break;
		}
		o = o.parentNode;
	}
	
	var editFg = false;
	if (findTd) {
		if (o.cellIndex > 0) {
			editFg = true;
		}
	}

	if (editFg) {
		var editor = document.createElement("input");
		editor.type = "text";
		editor.style.width = "100%";
		editor.onkeypress = function(td) {
			return function() {
				if (event.keyCode == 13) {
					td.innerHTML = this.value;
				}
			}
		}(o);
		editor.onblur = function(td) {
			return function() {
				td.innerHTML = this.value;
			}
		}(o);
		
		o.appendChild(editor);
		editor.focus();
	}

}

</script>


</BODY>
</HTML>

こんなかんじ。
けっこうめんどくさい。けど、ListViewたって所詮TABLEで表現しているだけだから。

このサンプルは、任意のテーブルセルを編集可能状態にして、フォーカスアウトで編集確定して
その位置のテキストBOXを消して入力内容をセルに貼り付けるまで、を示しています。

あとは、hidden を作って、名前をリストに登録しておいて、同じ位置に編集されたら、重複作成
しないようにリストの名前を判定してから、hiddenを作るようにするといいかな・・・





引用返信 編集キー/
■27749 / inTopicNo.5)  Re[4]: ListViewのEditTemplateで一部分だけ編集
□投稿者/ ま (160回)-(2008/11/13(Thu) 16:47:30)
こりゃ駄目だw

ま、考えなくちゃいけない問題一杯ありそうだけど、やって出来ないことは無いです。

ListViewの動きと実際の展開されたHTMLがあれば、ポストバックしないものであれば、
1〜2日くらいで出来そうです。


引用返信 編集キー/


トピック内ページ移動 / << 0 >>

このトピックに書きこむ

過去ログには書き込み不可

管理者用

- Child Tree -