搜索不在Gridview上工作

时间:2014-11-21 15:43:24

标签: javascript jquery asp.net gridview

我已在gridview上为this中的列实施了搜索  链接。我按照我的要求实施。但它不适合我。请参阅代码供您参考: -

 <asp:GridView ID="grdCSRPageData" runat="server" Width="100%" border="1" Style="border: 1px solid #E5E5E5;" CellPadding="3" class="hoverTable" AutoGenerateColumns="false" AllowPaging="True" BackColor="#E5E5E5" BorderColor="#999999" BorderStyle="Solid" BorderWidth="1px" ForeColor="Black" GridLines="Vertical" ShowFooter="true" PageSize="5" OnPageIndexChanging="grdCSRPageData_PageIndexChanging" OnRowCancelingEdit="grdCSRPageData_RowCancelingEdit" OnRowEditing="grdCSRPageData_RowEditing" OnRowUpdating="grdCSRPageData_RowUpdating" OnRowDeleting="grdCSRPageData_RowDeleting" OnRowCommand="grdCSRPageData_RowCommand" OnDataBound="grdCSRPageData_DataBound">
                <AlternatingRowStyle BackColor="#CCCCCC" />

                <Columns>
                    <asp:BoundField DataField="page_title" HeaderText="Page Title" ItemStyle-Width="30" />
                    <asp:BoundField DataField="page_description" HeaderText="Page Description" ItemStyle-Width="30" />
                    <asp:BoundField DataField="meta_title" HeaderText="Meta Title" ItemStyle-Width="30" />
                    <asp:BoundField DataField="meta_keywords" HeaderText="Meta Keywords" ItemStyle-Width="30" />
                    <asp:BoundField DataField="meta_description" HeaderText="Meta Description" ItemStyle-Width="30" />
                    <asp:CheckBoxField DataField="Active" HeaderText="Active" ItemStyle-Width="15" />
                    <asp:TemplateField HeaderText="Edit/Delete" HeaderStyle-Width="15%">
                        <ItemTemplate>
                            <asp:LinkButton ID="lbtnEdit" runat="server" CommandName="Edit" Text="Edit" />
                            <span onclick="return confirm('Are you sure want to delete?')">
                                <asp:LinkButton ID="btnDelete" Text="Delete" runat="server" CommandName="Delete"></asp:LinkButton>
                            </span>
                        </ItemTemplate>
                        <EditItemTemplate>
                            <asp:LinkButton ID="btnUpdate" Text="Update" runat="server" CommandName="Update" />
                            <asp:LinkButton ID="btnCancel" Text="Cancel" runat="server" CommandName="Cancel" />
                        </EditItemTemplate>
                        <HeaderTemplate>
                            <asp:Button ID="btnInsertRecord" runat="server" Text="Add" CommandName="Insert" />
                        </HeaderTemplate>
                        <HeaderStyle Width="15%"></HeaderStyle>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>

另见JS脚本

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>          
<script type="text/javascript" src="js/quicksearch.js"></script>
<script type="text/javascript">
    $(function () {
        $('.form-control').each(function (i) {
            $(this).quicksearch("[id*=grdCSRPageData] tr:not(:has(th))", {
                'testQuery': function (query, txt, row) {
                    return $(row).children(":eq(" + i + ")").text().toLowerCase().indexOf(query[0].toLowerCase()) != -1;
                }
            });
        });
    });
</script>

另请参阅您的参考代码: -

  protected void grdCSRPageData_DataBound(object sender, EventArgs e)
    {
        GridViewRow row = new GridViewRow(0, 0, DataControlRowType.Header, DataControlRowState.Normal);
        for (int i = 0; i < grdCSRPageData.Columns.Count; i++)
        {
            TableHeaderCell cell = new TableHeaderCell();
            TextBox txtSearch = new TextBox();
            txtSearch.Attributes["placeholder"] = grdCSRPageData.Columns[i].HeaderText;
            txtSearch.CssClass = "form-control";
            cell.Controls.Add(txtSearch);
            row.Controls.Add(cell);
        }
        grdCSRPageData.HeaderRow.Parent.Controls.AddAt(1, row);
    }

网格的更改

 protected void grdUser_DataBound(object sender, EventArgs e)
    {
        GridViewRow row = new GridViewRow(0, 0, DataControlRowType.Header, DataControlRowState.Normal);
        for (int i = 0; i < grdUser.Columns.Count; i++)
        {
            TableHeaderCell cell = new TableHeaderCell();
            TextBox txtSearch = new TextBox();
            txtSearch.Attributes["placeholder"] = grdUser.Columns[i].HeaderText;
            txtSearch.CssClass = "form-control HaydaBre";

            if (grdUser.Columns[i].HeaderText != "Action" && grdUser.Columns[i].HeaderText != "" && grdUser.Columns[1].HeaderText != "Select") // && grdUser.Columns[i].HeaderText != "" && grdUser.Columns[i].HeaderText != null && grdUser.Columns[i].HeaderText != "Select")
            {
                cell.Controls.Add(txtSearch);
            }
            row.Controls.Add(cell);
        }
        grdUser.HeaderRow.Parent.Controls.AddAt(1, row);
    }

当我添加HeaderText!= Select时。它停止为第一列工作,但它适用于其他列

1 个答案:

答案 0 :(得分:3)

表单控件类中有很多元素。那么您可以将C#代码更改为:

protected void grdCSRPageData_DataBound(object sender, EventArgs e)
    {
        GridViewRow row = new GridViewRow(0, 0, DataControlRowType.Header, DataControlRowState.Normal);
        for (int i = 0; i < grdCSRPageData.Columns.Count; i++)
        {
            TableHeaderCell cell = new TableHeaderCell();
            TextBox txtSearch = new TextBox();
            txtSearch.Attributes["placeholder"] = grdCSRPageData.Columns[i].HeaderText;
            txtSearch.CssClass = "form-control HaydaBre";
            cell.Controls.Add(txtSearch);
            row.Controls.Add(cell);
        }
        grdCSRPageData.HeaderRow.Parent.Controls.AddAt(1, row);
    }

你的JS代码是:

<script type="text/javascript">
    $(function () {
        $('.HaydaBre').each(function (i) {
            $(this).quicksearch("[id*=grdCSRPageData] tr:not(:has(th))", {
                'testQuery': function (query, txt, row) {
                    return $(row).children(":eq(" + i + ")").text().toLowerCase().indexOf(query[0].toLowerCase()) != -1;
                }
            });
        });
    });
</script>