javascript在asp.net c#中使用chechboxlist过滤gridview [英] javascript filter gridview with chechboxlist in asp.net c#

问题描述

我正在寻找一种通过检查标题模板中的MultiselectDropDown Checkboxlist来过滤GridView的方式，其内容来自数据源. GridView应该刷新而没有回发(Javascript或jquery或客户端的某些东西)，并且仅显示与复选框匹配的行. 我不知道该怎么做.有人可以给我一个例子，向我展示如何实现这一目标吗? 预先感谢

I'm looking a way to filter a GridView with its contents coming from a datasource by checking a MultiselectDropDown Checkboxlist in the header template. The GridView should refresh without a postback (Javascript or jquery or something from client side) and display only rows matched the checkbox. I don't know how to do it. Could someone give me an example to show me how to achieve this goal? Thanks in advance

推荐答案

这是一个非常简单的粗略示例，它基于CheckBoxList中的选择异步更新了GridView.您应该能够修改我的示例以满足您的需求，包括加载实际数据并用所需的控件替换复选框列表.

This is a pretty simple, crude example of a GridView being updated asynchronously based on selections made in a CheckBoxList. You should be able to modify my example to meet your needs, including loading actual data and replacing the checkboxlist with whatever control you would like.

我在顶部和底部添加了时间，因此您可以看到每次异步回发只会导致部分页面加载.

I added the times at the top and the bottom so you can see that each asynchronous postback causes only a partial page load.

Default.aspx:

<p><%= "Initial page load: " + DateTime.Now.ToString("HH:mm:ss") %></p>

<asp:UpdatePanel ID="upTest" runat="server">
    <ContentTemplate>

        <p>Limit Results By Department:</p>
        <asp:CheckBoxList ID="cblMyList" runat="server">
            <asp:ListItem Text="Accounting" Value="Accounting"></asp:ListItem>
            <asp:ListItem Text="Sales" Value="Sales"></asp:ListItem>
            <asp:ListItem Text="Service" Value="Service"></asp:ListItem>
        </asp:CheckBoxList>

        <asp:Button ID="btnDepartments" CssClass="btn btn-primary" runat="server" OnClick="btnDepartments_Click" Text="Filter" />

        <asp:GridView ID="gvMyGrid" CssClass="table table-striped" runat="server"></asp:GridView>

        <p><%= "Latest Async Postback:" + DateTime.Now.ToString("HH:mm:ss") %></p>

    </ContentTemplate>
</asp:UpdatePanel>

Default.aspx.cs:

using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace TestWebFormsApp_2018_08_24 {
    public partial class _Default : Page {

        protected void Page_Load(object sender, EventArgs e) {
            if (!Page.IsPostBack) {
                // Do stuff on first page load
                GetData();
            }
        }

        protected void GetData(List<String> filter = null) {

            // Build a test table
            DataTable dtData = new DataTable("EmployeeData");
            dtData.Columns.Add(new DataColumn { ColumnName = "ID", DataType = typeof(int) });
            dtData.Columns.Add(new DataColumn { ColumnName = "Name", DataType = typeof(String) });
            dtData.Columns.Add(new DataColumn { ColumnName = "Department", DataType = typeof(String) });

            // Add some test data
            dtData.Rows.Add(new Object[] { 1, "Richard", "Sales" });
            dtData.Rows.Add(new Object[] { 2, "Dale", "Sales" });
            dtData.Rows.Add(new Object[] { 3, "Nancy", "Service" });
            dtData.Rows.Add(new Object[] { 4, "Robyn", "Sales" });
            dtData.Rows.Add(new Object[] { 5, "Henry", "Service" });
            dtData.Rows.Add(new Object[] { 6, "Conrad", "Accounting" });

            // Select the data based on the filter
            DataView dv = new DataView();
            dv.Table = dtData;

            if (filter != null && filter.Count > 0) {
                // Include items that match the filter
                String filterString = "";
                foreach (String dept in filter) {
                    filterString += "'" + dept + "',";
                }
                dv.RowFilter = "Department IN (" + filterString + ")";
            }

            // Bind the gridview to the filtered data
            //gvMyGrid.DataSource = dtData.Select("Department='Sales'");
            gvMyGrid.DataSource = dv;
            gvMyGrid.DataBind();

        }

        protected void btnDepartments_Click(object sender, EventArgs e) {
            List<String> filter = new List<String>();
            foreach (ListItem item in cblMyList.Items) {
                if (item.Selected) {
                    filter.Add(item.Value);
                }
            };
            GetData(filter);
        }
    }
}

这篇关于javascript在asp.net c#中使用chechboxlist过滤gridview的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！