アプリケーションに GridView があります。一部のセルを編集したり、行を削除したりする機能をユーザーに提供する必要があります。ユーザーがセルを右クリックしたときにコンテキスト メニューを表示する必要があります。ユーザーが「編集」をクリックすると、ヘルプ情報を表示し、このセルを編集モードにしてフォーカスを設定する必要があります。ここに私のコードがあります:
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<script type="text/javascript">
$(document).ready(function () {
$("#myMenu").hide();
$("#helpRow").hide();
$("table[id$='gvListOfMatters'] > tbody > tr > td").bind('contextmenu', function (e) {
$("#myMenu").hide();
e.preventDefault();
$(this).css("cursor", "pointer");
iColIndex = $(this).closest("tr td").prevAll("tr td").length;
iRowIndex = $(this).closest("tr").prevAll("tr").length;
rowid = $(this).parent().children()[0].innerHTML;
if (!isNaN(rowid)) {
//call context menu here
$("#myMenu").css({
top: e.pageY + "px",
left: e.pageX + "px",
position: 'absolute'
});
$("#myMenu").show(100);
}
});
});
//hide when left mouse is clicked
$(document).bind('click', function (e) {
$("#myMenu").hide(100);
});
var rowid = 0;
function fnEdit() {
var lnkEdit = document.getElementById('<%=lnkEdit.ClientID %>');
var hiddenField = document.getElementById('<%=fldRowID.ClientID %>');
hiddenField.value = rowid;
lnkEdit.click();
};
function fnDelete() {
var lnkDelete = document.getElementById('<%=lnkDelete.ClientID %>');
var hiddenField = document.getElementById('<%=fldRowID.ClientID %>');
hiddenField.value = rowid;
lnkDelete.click();
};
</script>
<div id="helpRow">
</div>
<asp:GridView ID="gvHelpRow" runat="server" AutoGenerateColumns="true" CssClass="helpRow" ShowHeader="false" Visible="false"></asp:GridView>
<br />
<div id="SourceGrid" class="table responsive">
<asp:GridView ID="gvListOfMatters" runat="server"
SOME Tamplate COLUMNS…
</asp:GridView>
</div>
<asp:LinkButton ID="lnkEdit" runat="server" Style="display: none" OnClick="lnkEdit_Click" />
<asp:LinkButton ID="lnkDelete" runat="server" Style="display: none" OnClick="lnkDelete_Click" />
<asp:HiddenField ID="fldRowID" runat="server" />
<%--↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ContextMenu↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓--%>
<div id="myMenu" class="contextMenu">
<table style='width: 100%;'>
<tr>
<td onclick="fnEdit();">- Edit
</td>
</tr>
<tr>
<td onclick="fnDelete();">- Delete
</td>
</tr>
</table>
</div>
<%--↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ContextMenu↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑--%>
</asp:Content>
最初の質問は、選択したセルの ID を取得する方法です。私のコードで問題がある場所について言及しました。
コード ビハインドに edit.click() と delete.click() のイベント ハンドラがあります。edit.click() では、データ ソースを helpRow GridView にバインドしています。
私の 2 番目の質問は、クリックされた行のすぐ下にこの HelpRow GridView を表示する方法ですか? このグリッドの正しい位置を設定する方法が見つかりません...絶対位置とXおよびY位置でなければならないことはわかっています...
したがって、アイデア全体:ユーザーはセルを右クリックします。コンテキスト メニュー (「編集」と「削除」) を表示し、この時点で行 ID とセル ID を保存する必要があります (行 ID を取得しましたが、セル ID が問題です...)。ユーザーが編集をクリックすると、rowid に基づいていくつかのデータ (セッションに格納されている) をバインドして helpRow グリッド ビューにする必要があります。次に、選択した行のすぐ下にこの helRow を表示する必要があります (位置: 絶対および ... 正しい位置を取得する方法???) 選択したセルを編集モードにして、このセルにフォーカスを設定します。