如何在右键单击时获取 ASP.NET GridView在jQuery中的单元格ID

How to get cell ID of ASP.NET GridView in jQuery on right Click?

本文关键字:jQuery GridView 单元格 ID NET ASP 右键 单击 获取      更新时间:2023-09-26

我的应用程序中有一个 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。

我的第二个问题是如何在单击的行下方显示此帮助行网格视图?我找不到如何为这个网格设置正确位置的方法......我知道它应该是绝对位置和 X 和 Y 位置......

所以整个想法:用户右键单击某个单元格。我需要显示上下文菜单("编辑"和"删除"),此时存储 rowID 和 cellID(我得到了 rowid,但 cellid 是问题所在......当用户单击编辑时,我需要根据 rowid 将一些数据(它存储在会话中)绑定到 helpRow 网格视图。然后我需要在所选行的正下方显示这个 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);
                }
            });

现在,我可以获取行ID,单元格ID以及此行中每个单元格内的所有文本。我将用最新更新更新我的原始问题