がハイライト表示されるようにバインドした後、WEBGRIDの行を選択するにはどうすればいいですか？ チェックボックスまたはオプションボタンを使用せずに任意の行またはセルをマウスでクリックします列）WEBGRIDで行を選択
1.）任意の行を選択した後、その行のデータ値を取得できますか？
2.）キーボードで選択項目を上下に移動できます（上下のキーボード ボタン）。
3）と行を選択する指標を変更した後（マウスによって、またはキーボード によってアップダウンボタン）rowselectedindexchagedまたはrowselectingindexchangingイベント を発射することができます/
を扱っているがありますあなたの
ありがとうございましたこの質問には多くのことがあり、それを実装する方法はたくさんあります。ここでは、これをどうやって行うことができるかの概略を示します。私はあなたがJQueryを使用していると仮定しています。
それぞれにイベントをクリックして添付し、クリック時に行またはセルをハイライト表示するには：もちろん
$("tr").click(function() { $(this).css('background', 'yellow'); });
$("td").click(function() { $(this).css('background', 'lightblue'); });
、あなたは非ハイライト彼らにも必要になりますが、私たちはその瞬間にそれに来ます。
行のデータを取得するには（クライアントではなくサーバー上で行うことを前提としています）、AJAX呼び出しを行う必要があります。行全体を戻すのではなく、行のIDを取得するのが最も簡単です。クリックイベント内でこのような何か：
var row_id = $(this).closest("tr").find("input[type=hidden]").attr("value");
$.get("?row_id=" + row_id);
これは、あなたがその行のID値を使用してWebGridのに各行に隠し入力を追加していることを前提としています。
はあなたがクリック機能内でこれを使用することができます選択した最初の行のセルにアクセスする必要がある場合：
var cellOne = this.cells[0].innerHTML ;
また、私は（あなたのクリック機能のみを特定のテーブルにリンクされなければならないことをお勧めしますそれ以外の選択すべてのtr要素で有効になります）、選択が変更されたときに追加および削除されるcssクラスを使用します。
$('#MainTable tr').click(function() {
$(this).addClass('select');
$('#MainTable tr').not(this).removeClass('select');
});
は上に移動するには、下には、ウィンドウに「からkeyup」イベントリスナを追加することができますし、アップ/ダウン扱います。詳細はこちらをご覧ください：jQuery kepress detection on left, right arrows and space bar Javascriptを使用して、現在選択されている行を追跡して、必要に応じてハイライト/ハイライトを解除する必要があります。
最後に、ユーザーが別の行をクリックまたは矢印キーを押したときにAJAX呼び出し（またはJavascript呼び出し）をトリガーすることができます。
$.get("?event=row_selection_changed&row_id=" + row_id);
@grid.GetHtml(htmlAttributes: new { id="MainTable" }, .....);
<script type="text/javascript">
$(function()
{
var tr = $('#MainTable').find('tr');
tr.bind('click', function (event)
{
$("tr").click(function() { $(this).css('background', 'yellow'); });
});
});
</script>
をあなたはこのコードを試すことができます：
<div id="AjaxWebGrid">
@grid.GetHtml(
htmlAttributes: new { id = "MainTable" },
tableStyle: "webGrid",
headerStyle: "header",
alternatingRowStyle: "alt",
selectedRowStyle: "select",
columns: grid.Columns(
grid.Column("SendedInDateTime", "SendDate", null, style: "SendDateTimeStyle"),
grid.Column("", header:"حذف", format:
@<text>
@Ajax.ActionLink("Delete", "Delete",
new { id = "", DelID = item.Id }, new AjaxOptions { UpdateTargetId = "AjaxWebGrid" },
new { @class = "button" })
</text>)
));
</div>
<script>
$(document).ready(function() {
$('#MainTable tr').click(function() {
$(this).addClass('select');
$('#MainTable tr').not(this).removeClass('select');
});
});
</script>