Gridview中的Select2插件仅适用于asp.net中的最后一行网格

编程问答 2022-08-11

问题描述

HEADER 在asp.net网页上使用了select2-4.0.13和bootstrap v4.4.1 

<div></div>

ASPX页面 创建了具有3列的gridview，其中第一列包含带有select2插件的dropdownlist，但是select2仅适用于gridview的最后一行，对于其他行，它显示普通的下拉列表

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <link href="Styles/Bootstrap v4.4.1/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="Styles/Select2-4.0.13/select2.min.css" rel="stylesheet" type="text/css" />
    <link href="Styles/Select2-4.0.13/select2-bootstrap4.min.css" rel="stylesheet" type="text/css" />
</asp:Content>

脚本部分 链接了所需的脚本bootstrap4和select2脚本，为ID为“ .select2-single”的下拉列表初始化了select2 

<asp:GridView ID="GrdPackingSlipItem" runat="server" AllowPaging="false" AutoGenerateColumns="False"
    CssClass="table-xs table-responsive table-striped table-bordered table-hover p-1"
    EmptyDataText="No rows for the selection criteria." EnableTheming="False" OnRowDataBound="GrdPackingSlipItem_RowDataBound">
    <Columns>
        <asp:TemplateField HeaderText="Sl.No" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left" ItemStyle-Width="50" HeaderStyle-Font-Bold="false">
            <ItemTemplate>
                <%# Container.DataItemIndex + 1 %>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Item Name" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left"
            ItemStyle-Width="220" HeaderStyle-Font-Bold="false" ControlStyle-Width="100%">
            <ItemTemplate>
                <asp:DropDownList runat="server" ID="GrdtxtItemName" ClientIDMode="Static" data-width="100%"
                    CssClass="select2-single input-sm w-100" data-placeholder="Item Name....." AppendDataBoundItems="true">
                </asp:DropDownList>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Pcs" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center"
            ItemStyle-Width="100" HeaderStyle-Font-Bold="false" ControlStyle-Width="100%">
            <ItemTemplate>
                <asp:TextBox ID="GrdtxtPcs" runat="server" ClientIDMode="Static" onkeypress="return isIntegerKey(event);"
                    OnPaste="return false" MaxLength="10" BorderStyle="Solid" BorderColor="WhiteSmoke"
                    Text='<%#DataBinder.Eval(Container.DataItem,"QUANTITY")%>'>
                </asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
    <HeaderStyle Font-Names="Tahoma" Font-Size="9pt" BackColor="#5D7B9D" Font-Bold="false"
        ForeColor="White" HorizontalAlign="Center" />
    <RowStyle Font-Names="Tahoma" Font-Size="10pt" ForeColor="Black" Height="30" />
    <PagerStyle CssClass="GridPager" />
</asp:GridView>

隐藏代码

在页面加载中加载了带有数据表的gridview 

<script src="Scripts/jquery-3.4.1/jquery-3.4.1.min.css" type="text/javascript"></script>
<script src="Scripts/Bootstrap v4.4.1/popper.min.js" type="text/javascript"></script>
<script src="Scripts/Bootstrap v4.4.1/bootstrap.min.js" type="text/javascript"></script>
<script src="Scripts/Bootstrap v4.4.1/bootstrap.bundle.min.js" type="text/javascript"></script>
<script src="Scripts/Select2-4.0.13/select2.full.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        initSelect2();
    });

    function pageLoad() {
        initSelect2();
    }

    function initSelect2() {
        $('.select2-single').select2({
            theme: 'bootstrap4',width: 'style',containerCssClass: ':all:',allowClear: true
        });
    }
</script>

在gridview行数据绑定的下拉列表项绑定列表中

private void LoadGridData()
{
    DataTable dt = new DataTable();
    dt.Columns.Add(new DataColumn("RECORD_ID",typeof(int)));
    dt.Columns.Add(new DataColumn("PRODUCT_ID",typeof(int)));
    dt.Columns.Add(new DataColumn("PRODUCT_NAME",typeof(string)));
    dt.Columns.Add(new DataColumn("QUANTITY",typeof(int)));
    //empty row on if no record
    DaTarow dtEmptyrow = dt.NewRow();
    dtEmptyrow["RECORD_ID"] = 1;
    dtEmptyrow["PRODUCT_ID"] = 1;
    dtEmptyrow["PRODUCT_NAME"] = "Apple";
    dtEmptyrow["QUANTITY"] = 100;
    dt.Rows.Add(dtEmptyrow);

    dtEmptyrow = dt.NewRow();
    dtEmptyrow["RECORD_ID"] = 2;
    dtEmptyrow["PRODUCT_ID"] = 5;
    dtEmptyrow["PRODUCT_NAME"] = "Oppo";
    dtEmptyrow["QUANTITY"] = 500;
    dt.Rows.Add(dtEmptyrow);

    dtEmptyrow = dt.NewRow();
    dtEmptyrow["RECORD_ID"] = 3;
    dtEmptyrow["PRODUCT_ID"] = 3;
    dtEmptyrow["PRODUCT_NAME"] = "Samsung";
    dtEmptyrow["QUANTITY"] = 300;
    dt.Rows.Add(dtEmptyrow);


    ViewState["PackingSlipItem"] = dt.copy(); // original copy
    GrdPackingSlipItem.DataSource = dt;
    GrdPackingSlipItem.DataBind();
}

@L_404_0@ for other rows it display normal dropdownlist

解决方法

您正在GridView中使用ClientIDMode="Static"。这将导致多个DropDownList和TextBox具有相同的ID。 如果查看生成的HTML，您会发现所有DropDownList的ID为grdtxtItemName。

但是，所有元素（无论是否为Web表单）都应具有唯一的ID。 Select2基于ID进行绑定，并且由于它们都相同，因此只有最后一个起作用。因此，删除ClientIDMode。

<asp:DropDownList runat="server" ID="grdtxtItemName" data-width="100%"
    CssClass="select2-single input-sm w-100" data-placeholder="Item Name....." AppendDataBoundItems="true">
</asp:DropDownList>
asp.netc#c#gridviewgridviewjquery-select2