Nawigacja GridView w górę iw dół za pomocą jQuery

Question

Feb 22, 2013, 09:48 AM

Nawigacja GridView w górę iw dół za pomocą jQuery

Próbuję uzyskać funkcję nawigacji klawiatury GridView Up and Down, używając jQuery. Napisałem kod tego samego,ale z błędem, który działa tylko raz.

Kroki do odtworzenia błędu

Po skopiowaniu mojego kodu przykładowego odpowiednio do WebForm.aspx i WebForm.aspx.cs uruchom formularzKliknij drugi rekord (np.), Aby wybrać rekord GridViewNaciśnij klawisz strzałki w dół, aby wybrać następny rekordNaciśnij ponownie klawisz strzałki w dół, aby wybrać następny rekord (ale tutaj nie będzie działać)

Teraz, jeśli ponownie klikniesz dowolny wiersz, klawisz strzałki w dół będzie działał jeszcze raz.

Proszę wskazać, czego tu brakuje.

WebForm1.aspx

<head runat="server">
    <title></title>
    <style type="text/css">
        .normalRow
        {
            background-color: White;
            color: Black;
        }
        .selectedRowNew
        {
            background-color: #b0c4de;
            color: Black;
        }
    </style>

    <script src="js/jquery-1.6.1.min.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            // The selector expression tr[id] will ensure the click event is added to only data rows since we have added id attribute 
            // to only data rows from code behind

            $('#<%=GridView1.ClientID %> tr[id]').click(function () {
                $('#<%=GridView1.ClientID %> tr[id]').removeClass("selectedRowNew").addClass("normalRow");
                $(this).removeClass("normalRow").addClass("selectedRowNew");
            });

            $('#<%=GridView1.ClientID %> tr[id]').mouseover(function () {
                $(this).css({ cursor: "default", cursor: "default" });
            });

            $('#<%=GridView1.ClientID %> tr[id]').keydown(function (event) {
                if (event.keyCode == "40") {
                    $('#<%=GridView1.ClientID %> tr[id]').removeClass("selectedRowNew").addClass("normalRow");

                    var row = $(this).closest('tr');
                    var next = row.next();
                    next.removeClass("normalRow").addClass("selectedRowNew");
                    next.focus();
                    next.click();
                }
            });

        });

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:GridView ID="GridView1" runat="server" OnRowDataBound="GridView1_RowDataBound">
        </asp:GridView>
    </div>
    </form>
</body>

WebForm1.aspx.cs

protected void Page_Load(object sender, EventArgs e)
        {
            DataTable dt = new DataTable();
            dt.Columns.Add("Id", typeof(Int32));
            dt.Columns.Add("Name", typeof(String));

            dt.Rows.Add(new object[] { 1, "John" });
            dt.Rows.Add(new object[] { 2, "James" });
            dt.Rows.Add(new object[] { 3, "Christine" });
            dt.Rows.Add(new object[] { 4, "Michael" });
            dt.Rows.Add(new object[] { 5, "David" });
            dt.Rows.Add(new object[] { 6, "Susan" });

            GridView1.DataSource = dt;
            GridView1.DataBind();
        }

        protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) 
        {
            if (e.Row.RowType == DataControlRowType.DataRow) 
            {
                e.Row.Attributes.Add("id", "0");
            }
        }

(zaktualizowany kod js) - nadal nie działa, mimo że przechodzi przez niego prawidłowo

<script type="text/javascript">
        $(document).ready(function () {
            // The selector expression tr[id] will ensure the click event is added to only data rows since we have added id attribute 
            // to only data rows from code behind

            $('#<%=GridView1.ClientID %> tr[id]').click(function () {
                $('#<%=GridView1.ClientID %> tr[id]').removeClass("selectedRowNew").addClass("normalRow");
                $(this).removeClass("normalRow").addClass("selectedRowNew");
            });

            $('#<%=GridView1.ClientID %> tr[id]').mouseover(function () {
                $(this).css({ cursor: "default", cursor: "default" });
            });

            // @freshbm: your code goes here
            $("body").keydown(function (e) {
                if (e.keyCode == 40) //down arrow key code
                    toggleRowSelectionDown();
                if (e.keyCode == 38) // up arrow key code
                    toggleRowSelectionUp();
            }); //this code detect is it up or down arrow

            function toggleRowSelectionDown() {
                var row = $("<%=GridView1.ClientID%> .selectedRowNew");
                if (!row.is(":last-child")) { //check for last row in grid
                    $("<%=GridView1.ClientID%> tr[id]").removeClass("selectedRowNew").addClass("normalRow");
                    var next = row.next();
                    next.removeClass("normalRow").addClass("selectedRowNew");
                }
            }

            function toggleRowSelectionUp() {
                var row = $("<%=GridView1.ClientID%> .selectedRowNew");
                if (!row.is(":last-child")) { // check for first row in grid
                    $("<%=GridView1.ClientID%> tr[id]").removeClass("selectedRowNew").addClass("normalRow");
                    var prev = row.prev();
                    prev.removeClass("normalRow").addClass("selectedRowNew");
                }
            }
        });
    </script>