0

アプリケーションに 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 を表示する必要があります (位置: 絶対および ... 正しい位置を取得する方法???) 選択したセルを編集モードにして、このセルにフォーカスを設定します。

4

1 に答える 1