У меня есть GridView в моем приложении. Мне нужно предоставить пользователю некоторые функции для редактирования некоторых ячеек или удаления строк. Мне нужно показать контекстное меню, когда пользователь щелкает правой кнопкой мыши по какой-либо ячейке. Когда пользователь нажимает "Изменить", мне нужно показать некоторую справку Info и поместить эту ячейку в режим редактирования и установить фокус на нем. Вот мой код:
<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>
Первый вопрос - как получить идентификатор выбранной ячейки? Я упомянул о месте, где проблема в моем коде.
У меня есть обработчики событий для edit.click() и delete.click() в кодировке. В edit.click() я привязываю источник данных к helpRow GridView.
Мой второй вопрос заключается в том, как показать этот HelpRow GridView прямо под строкой, которая была нажата? Я не могу найти способ установить правильное положение для этой сетки... Я знаю, что это должно быть абсолютное положение и положение X и Y...
Таким образом, вся идея: пользовательское право нажимает на какую-то ячейку. Мне нужно показать контекстное меню ("Изменить" и "Удалить") и в этот момент сохранить rowID и cellID (rowid я got, но cellid - проблема...). Когда пользователь нажимает на редактирование, мне нужно связать некоторые данные (они хранятся в сеансе) на основе rowid, чтобы helpRow Grid View. Затем мне нужно показать этот helRow прямо под выбранной строкой (позиция: абсолютная и... КАК ПОЛУЧИТЬ ПРАВИЛЬНУЮ ПОЗИЦИЮ???) и сделать выбранную ячейку в режиме редактирования и установить фокус на эту ячейку.
Я нашел свой путь! Прежде всего, я привязываю функцию к td
вместо tr
$("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);
}
});
Теперь я могу получить rowID, cellID и весь текст внутри каждой ячейки этой строки. Я обновлю свой первоначальный вопрос с последним обновлением