如何使用Javascript在GridView中添加“选择”和“删除”按钮

时间:2016-11-19 14:21:46

标签: javascript jquery asp.net gridview

我有以下Javascript函数将选定的(使用复选框)行值从Gridview1复制到GridView2。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        var temprow = $('[id*=GridView2] table tbody').find(".emptyTd");

        $('[id*=cbCheck]').change(function () {
            var checkbox = $(this);
            if ($(this).is(":checked")) {
                var row = $(this).parent().closest('tr');
                var temp = $(row).clone(true);
                $('[id*=GridView1] tbody').append(temp);
                $('[id*=GridView2] table tbody').find(".emptyTd").remove();
                $(row).find("td:first").remove();
                $('[id*=GridView2] table tbody').append(row);
            }
            else {
                $('[id*=GridView2] table tbody tr').each(function () {
                    if ($(this).find("td:first").html() == $(checkbox).parent().closest('tr').find("td:nth-child(2)").html()) {
                        $(this).remove();
                        if ($('[id*=GridView2] table tbody').has('td').length == 0) {
                            $('[id*=GridView2] table tbody').append(temprow);
                        }
                    }
                });
            }
        });
    });       
</script>

现在我想使用Javascript / jQuery在GridView2中添加SELECTDELETE按钮。

我的GidView2看起来像:

<asp:GridView ID="GridView2" HeaderStyle-BackColor="#3AC0F2" HeaderStyle-ForeColor="White"
    runat="server" AutoGenerateColumns="false" OnSelectedIndexChanged="GridView2_SelectedIndexChanged">
 <EmptyDataTemplate>
        <table border="0" cellpadding="0" cellspacing="0" width="325px">
            <tr style="color: White; background-color: #3AC0F2;">

                <th scope="col">
                    Item Code
                </th>
                <th scope="col">
                    Item Name
                </th>
                <th scope="col">
                    Unit
                </th>
                <th scope="col">
                    Price
                </th>
                <th scope="col">
                    Stock
                </th>
            </tr>
            <tr class="emptyTd">
                <td style="width: 30px; text-align: center" colspan="3">
                    No Records found
                </td>
            </tr>
        </table>
    </EmptyDataTemplate>
</asp:GridView>

1 个答案:

答案 0 :(得分:0)

我不建议在客户端添加控件以将其用作服务器控件。

我建议在服务器端添加带有cssclass的按钮来隐藏它们。 只需使用与jQuery相同的cssclass即可。