【发布时间】：2014-03-30 18:25:10
【问题描述】：
我正在尝试在 asp.net 中创建一个 GridView，它可以像 Excel 一样过滤 gridview 的每一列。 为此，我创建了一个 Gridview 并在 GridView 的每一列的标题上使用 Jquery 多选小部件来进行过滤。
<cc1:GridView ID="gvDailyTracker" runat="server" CssClass="mGrid" CellSpacing="2" AutoGenerateColumns="false"
ShowFooter="false" AllowPaging="true" OnPageIndexChanging="gvDailyTracker_PageIndexChanging" OnRowDataBound="gvDailyTracker_RowDataBound"
OnRowCommand="gvDailyTracker_RowCommand" OnRowEditing="gvDailyTracker_RowEditing" OnSelectedIndexChanged="gvDailyTracker_SelectedIndexChanged"
OnDataBound="gvDailyTracker_DataBound">
<EmptyDataRowStyle BackColor="LightBlue" Width="1180" />
<EmptyDataTemplate>
No Data Found From The Current Selection,Please Select Appropriate Search Criteria.
</EmptyDataTemplate>
<Columns>
<asp:TemplateField SortExpression="DateProcessed" HeaderStyle-Font-Bold="true"
HeaderStyle-Font-Names="Calibre" HeaderStyle-ForeColor="White">
<HeaderTemplate>
<select id="ddlDateProcessed" name="test" runat="server" multiple="true" style="width: 100px;">
</select>
</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="lblDateProcessed" runat="server" Text='<%#Eval("DateProcessed") %>' CssClass="GridContent" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField SortExpression="InvoiceFileName" HeaderStyle-Font-Bold="true"
HeaderStyle-Font-Names="Calibre" HeaderStyle-ForeColor="White">
<HeaderTemplate>
<select id="ddlInvoiceFilename" name="test" runat="server" multiple="true" style="width: 100px;">
</select>
</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="lblInvoiceFileName" runat="server" Text='<%#Eval("InvoiceFileName") %>' CssClass="GridContent" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</cc1:GridView>
<script type="text/javascript">
$(document).ready(function () {
$("#MainContent_gvDailyTracker_ddlDateProcessed").multiselect({
SelectedText: 'DateProcessed',
noneSelectedText: 'DateProcessed',
close: function () {
var dateProcessed = $("#MainContent_gvDailyTracker_ddlDateProcessed").multiselect("getChecked").map(function () {
return this.value;
}).get();
document.getElementById('<%=txtddlDateProcessed.ClientID%>').value = dateProcessed;
document.getElementById('<%=btnPostBack.ClientID %>').click();
},
beforeopen: function () {
$("#MainContent_gvDailyTracker_ddlDateProcessed").multiselect("checkAll");
},
minWidth: 120
});
$("#MainContent_gvDailyTracker_ddlInvoiceFilename").multiselect({
SelectedText: 'InvoiceFileName',
noneSelectedText: 'InvoiceFileName',
close: function () {
var InvoiceFilename = $("#MainContent_gvDailyTracker_ddlInvoiceFilename").multiselect("getChecked").map(function () {
return this.value;
}).get();
document.getElementById('<%=txtddlInvoiceFileName.ClientID%>').value = InvoiceFilename;
document.getElementById('<%=btnPostBack.ClientID %>').click();
},
beforeopen: function () {
$("#MainContent_gvDailyTracker_ddlInvoiceFilename").multiselect("checkAll");
},
minWidth: 120
});
});
function test() {
BindAllMultiSelectData();
var dateProcessed = $("#MainContent_gvDailyTracker_ddlDateProcessed").multiselect("getChecked").map(function () {
return this.value;
}).get();
var InvoiceFilename = $("#MainContent_gvDailyTracker_ddlInvoiceFilename").multiselect("getChecked").map(function () {
return this.value;
}).get();
document.getElementById('<%=txtddlDateProcessed.ClientID%>').value = dateProcessed;
document.getElementById('<%=txtddlInvoiceFileName.ClientID%>').value = InvoiceFilename;
}
function BindAllMultiSelectData() {
$("#MainContent_gvDailyTracker_ddlDateProcessed").multiselect({
SelectedText: 'DateProcessed',
noneSelectedText: 'DateProcessed',
close: function () {
var dateProcessed = $("#MainContent_gvDailyTracker_ddlDateProcessed").multiselect("getChecked").map(function () {
return this.value;
}).get();
document.getElementById('<%=txtddlDateProcessed.ClientID%>').value = dateProcessed;
document.getElementById('<%=btnPostBack.ClientID %>').click();
},
minWidth: 120
});
$("#MainContent_gvDailyTracker_ddlInvoiceFilename").multiselect({
SelectedText: 'InvoiceFileName',
noneSelectedText: 'InvoiceFileName',
close: function () {
var InvoiceFilename = $("#MainContent_gvDailyTracker_ddlInvoiceFilename").multiselect("getChecked").map(function () {
return this.value;
}).get();
document.getElementById('<%=txtddlInvoiceFileName.ClientID%>').value = InvoiceFilename;
document.getElementById('<%=btnPostBack.ClientID %>').click();
},
minWidth: 120
});
</script>
过滤gridView的C#代码
protected void btnPostBack_Click(object sender, EventArgs e)
{
if (!txtddlDateProcessed.Text.Equals(null) && txtddlDateProcessed.Text != string.Empty)
{
string filter=txtddlDateProcessed.Text;
filter = filter.Replace(",", "','");
string strFilter="[DateProcessed]" + " in ('" + filter + "')";
FilterHeader(strFilter);
}
if (!txtddlInvoiceFileName.Text.Equals(null) && txtddlInvoiceFileName.Text != string.Empty)
{
string filter=txtddlInvoiceFileName.Text;
filter = filter.Replace(",", "','");
string strFilter="[InvoiceFileName]" + " in ('" + filter + "')";
FilterHeader(strFilter);
}
ScriptManager.RegisterStartupScript(this, this.GetType(), Guid.NewGuid().ToString(), "test();", true);
}
到目前为止，一切正常，我可以过滤网格视图。 现在我真正想要的是在过滤网格视图之后，在多选小部件上所做的选择仍然保持不变。目前过滤后所有多选都未选中。
注意：-1。我正在动态绑定多选。（该列值的不同记录绑定到多选）
private void BindHeaderDropDown(string columnName, DataTable dt, string controlName)
{
System.Web.UI.HtmlControls.HtmlSelect objControlName = (System.Web.UI.HtmlControls.HtmlSelect)gvDailyTracker.HeaderRow.FindControl(controlName);
DataView view=new DataView(dt);
DataTable distinctValues = view.ToTable(true, columnName);
objControlName.DataSource = distinctValues;
objControlName.DataTextField = columnName;
objControlName.DataValueField = columnName;
objControlName.DataBind();
}
在绑定网格后的页面加载中，我通过调用BindHeaderDropDown 函数来绑定多选小部件并且在使用所选值过滤网格视图之后，我再次调用相同的函数，即BindHeaderDropDown 用于绑定Multiselect.In如果我在过滤后不调用此函数，则没有任何内容绑定到 Multiselect 并且没有单个复选框项它是空白的。
请帮助我并指导我，我会做什么？ 提前致谢。
【问题讨论】：
-
您可以从选定的项目中删除焦点
-
在我的问题的注意部分，我已经提到过滤后，我将所有 Multiselect 重新绑定到与以前相同的值，但无法找到重新选择旧选定值的方法。已经在 Javascript 中创建了一个测试方法，我在 Filtration 之后调用它。
标签： c# javascript jquery asp.net