Как получить идентификатор ячейки ASP.NET GridView в jQuery по правому клику?

0

У меня есть 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 прямо под выбранной строкой (позиция: абсолютная и... КАК ПОЛУЧИТЬ ПРАВИЛЬНУЮ ПОЗИЦИЮ???) и сделать выбранную ячейку в режиме редактирования и установить фокус на эту ячейку.

Теги:
gridview

1 ответ

0
Лучший ответ

Я нашел свой путь! Прежде всего, я привязываю функцию к 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 и весь текст внутри каждой ячейки этой строки. Я обновлю свой первоначальный вопрос с последним обновлением

Ещё вопросы

Сообщество Overcoder
Наверх
Меню