在Jquery UI Multiselect小部件中回發后，所選項目仍保持選中狀態

Question

我試圖在asp.net中創建一個GridView，它可以像Excel一樣過濾gridview的每一列。 為此，我創建了一個Gridview並在GridView的每一列的標題上使用了Jquery multiselect小部件來進行過濾。

<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窗口小部件，並在使用選定值過BindHeaderDropDown格視圖之后，再次調用相同的函數，即BindHeaderDropDown來綁定BindHeaderDropDown 。過濾后的功能，沒有任何東西綁定到Multiselect，並且它是空白的，沒有單個復選框項目。

請幫助我並指導我，我該怎么辦？ 提前致謝。

Answer 1

重新綁定Multiselect控件時，在每個回發（頁面加載方法）中，這就是丟失用戶選擇的值的原因，因為您正在重新生成過濾器控件。

要保留用戶的選擇，可以更新重新綁定方法並添加Logic來檢查它是“初始加載”還是“回發”。 如果是回發，則在重新綁定控件后，在相應的過濾器控件中手動添加/設置值。

希望它可以解決您的問題。 謝謝

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();
  // check if it is post-back
  objControlName.Text = Latest User value;
}

Answer 2

更好的是，您可以將您的多選值保存在隱藏字段中，然后根據隱藏字段值再次在多選下拉列表中填充這些項目。

這種將值存儲在隱藏字段中的方法

close: function (event, ui) {

                var values = new Array();
                $("#ddlAssignedTo").multiselect("getChecked").each(function (index, item) {
                    values.push($(item).val());
                });
                $("input[id*=hdnAssignTo]").val(values.join(","));
            }

這是根據hiddenfield在multislect下拉列表中填充值的方法

  function loadSelectedUsers() {
        $("#ddlAssignedTo").multiselect("uncheckAll");

        var listAssigned = $("#ctl00_MainContent_ddlAssignedTo option:selected").length;

        if (listAssigned == 0) {

            if ($("#<%=hdnAssignTo.ClientID%>").val() != null && $("#<%=hdnAssignTo.ClientID%>").val() != undefined && $("#<%=hdnAssignTo.ClientID%>").val() != "") {
                var arrUserIdSelected = $("#<%=hdnAssignTo.ClientID%>").val().split(',');


                if (arrUserIdSelected != null && arrUserIdSelected.length > 0) {
                    for (var iCount = 0; iCount < arrUserIdSelected.length; iCount++) {
                        $("#ddlAssignedTo").multiselect("widget").find("input:checkbox[value='" + arrUserIdSelected[iCount] + "']").attr("checked", "checked");
                        $("#ddlAssignedTo option[value='" + arrUserIdSelected[iCount] + "']").attr("selected", 1);
                        $("#ddlAssignedTo").multiselect("refresh");
                    }
                }
            }
        } 
    }