C1GridView:使用 Del 键删除行

C1GridView 可以通过点击删除列删除数据。点击删除指令触发服务端的 RowDeleting 事件，进而删除改行。

有些用户案例需要通过键盘来操作 C1GridView，例如，通过 上下键选择行，然后点击删除键删除该行。在 Wijmo GridView 中，我们可以轻松的实现该功能。本篇文章即将为你阐述实现方法。

首先，我们需要允许用户通过键盘导航 C1GridView，设置AllowKeyBoardNavigation 为 “true” 和 ClientSelectionMode 为 “SingleRow”。这时我们可以通过上下键 切换当前行，通过点击 Enter 键选择该行。以下代码为在 DesignTime 下的实现方法：

<wijmo:c1gridview id="C1GridView1" runat="server" autogeneratecolumns="False" datakeynames="ProductID"
            datasourceid="AccessDataSource1" clientselectionmode="SingleRow" allowkeyboardnavigation="true"
            onrowdeleting="C1GridView1_RowDeleting">
            <Columns>
            <wijmo:C1BoundField DataField="ProductID" HeaderText="ProductID" ReadOnly="True"
            SortExpression="ProductID">
            </wijmo:C1BoundField>
            <wijmo:C1BoundField DataField="ProductName" HeaderText="ProductName"
            SortExpression="ProductName">
            </wijmo:C1BoundField>
            <wijmo:C1BoundField DataField="UnitPrice" HeaderText="UnitPrice"
            SortExpression="UnitPrice">
            </wijmo:C1BoundField>
            <wijmo:C1BoundField DataField="UnitsInStock" HeaderText="UnitsInStock"
            SortExpression="UnitsInStock">
            </wijmo:C1BoundField>
            </Columns>
            </wijmo:c1gridview>
        <asp:AccessDataSource ID="AccessDataSource1" runat="server" DataFile="~/App_Data/C1NWind.mdb"
            SelectCommand="SELECT [ProductID], [ProductName], [UnitPrice], [UnitsInStock] FROM [Products]">
        </asp:AccessDataSource>

在选择一行后，点击 “Delete” 键。这时会触发客户端 “KeyDown” 事件。在这个事件中,首先需要检测是否点击了 ‘Del’ 键。如果是， 我们可以通过 “selection” 方法获取 C1GridView SelectedRowIndex。

此时，我们可以向用户发送删除的确认信息，如果需要删除，可以向后台发送删除指令，代码如下：

<script type="text/javascript">
        $(document).ready(function () {
            $("#C1GridView1").keydown(function (e) {
                //check if delete key was pressed
                if (e.key == "Del") {
                    //get selected row to be deleted
                    var selectedRowIndex = $("#C1GridView1").c1gridview("selection").selectedCells()._getSelectedRowsIndicies()[0];
                    //confirm before deleting
                    if (confirm("Are you sure you want to Delete Row " + (selectedRowIndex + 1) + "?")) {
                        //if user clicked OK, postback page with row deleting information
                        //RowDeleting event is raised.
                        __doPostBack('C1GridView1', 'delete:' + selectedRowIndex);
                    }
                    else {
                        //if user clicks Cancel, do nothing.
                        return false;
                    }
                }
            });
            //clear the default selection when grid renders.
            $("#C1GridView1").c1gridview({
                rendered: function (e) {
                    $("#C1GridView1").c1gridview("selection").clear();
                }
            });
        });
    </script>

后台代码为：

protected void C1GridView1_RowDeleting(object sender, C1GridViewDeleteEventArgs e)

        {

            C1GridViewRow row = C1GridView1.Rows[e.RowIndex];

            int productID = Convert.ToInt32(row.Cells[0].Text);

            AccessDataSource1.DeleteCommand = "DELETE FROM [Products] WHERE [ProductID] =" + productID;

        }

点击删除键，选择 OK即可删除该行
Download Sample