如何使用更新面板中的jquery将div从一个地方移动到另一个地方而不丢失其事件？

时间：2014-02-24 05:09:14

标签： jquery updatepanel datalist

我左侧有一个菜单，点击左侧菜单说“Sales”，它显示右侧的Categories（子菜单）。并点击子菜单，它再次显示子类别等等！现在我需要的是当用户点击右侧menu时，必须在左侧移动菜单，并且必须在右侧显示子类别，反之亦然。

例如：当我点击“Sales”时，会显示“Categories”(on right)。 when i click on "Categories"(on right) it shows "Manufacturers" (on right) and "Categories" div must be moved on left. and clicking on "Manufactureres" it shows "Carrier" (on right) and "Manufactureres" on left and then it must shows the "Devices".

销售 - ＆GT;商品分类＆GT; Manufacturers-＆GT; Carriers-＆GT;设备

我尝试了以下内容，但Copies Div内容来自Div1 Div2和不会取代 div内容，因此它认为它会失去其活动。

Note: All the Subcategories are displayed in DataList Control within the Updatte Panel.

Left Content Div： 

<div id="divMainCateogories">
<asp:Repeater ID="rptItemsList" runat="server" DataSourceID="sqlSalesCategoryList"
    OnItemCommand="rptItemsList_ItemCommand" OnItemDataBound="rptItemsList_ItemDataBound"
    OnItemCreated="rptItemsList_ItemCreated">
    <HeaderTemplate>
        <table width="100%" border="0" cellspacing="0" cellpadding="6">
            <tr>
                <td align="center" style="padding: 0px; border-right-style: solid; border-left-style: solid;
                    border-bottom-style: solid; border-width: 1px; border-color: #C0C0C0; text-align: left;">
                </td>
            </tr>
    </HeaderTemplate>
    <ItemTemplate>
        <tr>
            <td align="center" colspan="8" style="padding: 0px; border-right-style: solid; border-left-style: solid;
                border-bottom-style: solid; border-width: 1px; border-color: #C0C0C0; text-align: left;">
                <asp:Button ID="BtnCategory" runat="server" class="btnCat" categoryid='<%#Eval("CategoryID")%>'
                    Style="font-size: 16px; width: 200px; height: 35px; margin: 5px;" Text='<%#Eval("DisplayText")%>'
                    CommandArgument='<%#Eval("CategoryID")%>' CommandName='<%#Eval("CategoryName")%>' /><br />
            </td>
        </tr>
    </ItemTemplate>
    <FooterTemplate>
        </table>
    </FooterTemplate>
</asp:Repeater>
<asp:SqlDataSource ID="sqlSalesCategoryList" runat="server" ConnectionString="<%$ ConnectionStrings:GeexConnString %>"
    SelectCommand="p_Sales_GetSalesCategoryList" SelectCommandType="StoredProcedure">
</asp:SqlDataSource>
</div>
<div id="divDump">
<div id="divDeviceCategoryLeft">
</div>
<div id="divManufacturerLeft">
</div>
<div id="divCarrierLeft">
</div>
</div>

RightContent： 

<div id="divDeviceCategory">
 <div id="divDeviceCategoryInner">
    <asp:HiddenField ID="hdnSelectedKioskID" runat="server" />
    <div class="headertext">
        Categories:&nbsp;&nbsp; <b>
            <asp:Label ID="lblCategoryName" runat="server"></asp:Label>
        </b>
    </div>
    <div><%--RepeatColumns="8" RepeatDirection="Horizontal"--%>
        <asp:DataList ID="dlDeviceCategory4Cart" DataSourceID="SqlDataSource1" runat="server"
            DataKeyField="DeviceCategoryID" 
            ItemStyle-VerticalAlign="Top" OnItemCommand="dlDeviceCategory4Cart_ItemCommand"
            OnItemCreated="dlDeviceCategory4Cart_ItemCreated">
            <ItemTemplate>
                <asp:HiddenField ID="hdnDeviceCategoryID" runat="server" Value='<%# Eval("DeviceCategoryID") %>' />
                <asp:HiddenField ID="hdnCategoryName" runat="server" Value='<%# Eval("CategoryName") %>' />
                <asp:Button ID="BtnDeviceCategory" runat="server" class="pushButton" Text='<%# Eval("CategoryName") %>'
                    CommandName="GetManufacturers" CommandArgument='<%# Eval("DeviceCategoryID") %>' /></p>
            </ItemTemplate>
        </asp:DataList>
    </div>
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:GeexConnString %>"
        SelectCommand="p_Sales_GetDeviceCategory4Cart" SelectCommandType="StoredProcedure">
        <SelectParameters>
            <asp:ControlParameter ControlID="hdnSelectedKioskID" ConvertEmptyStringToNull="true"
                PropertyName="Value" DefaultValue="6" Name="LoggedInKioskID" Type="Int32" />
        </SelectParameters>
    </asp:SqlDataSource>
</div>
</div>
<div id="divManufacturer">

<div id="divManufacturerInner">
<asp:UpdatePanel ID="updateManufacturer" runat="server">

    <Triggers>
    </Triggers>
    <ContentTemplate>
        <asp:HiddenField ID="hdnSelectedCategoryID" runat="server" />
        <div class="headertext">
            Manufacturer:&nbsp;&nbsp; <b>
                <asp:Label ID="lblManufacturer" runat="server"></asp:Label>
            </b>
        </div>
        <div>
            <asp:DataList ID="dlManufacturerList" DataSourceID="SqlManufacturer" runat="server"
                DataKeyField="ManufacturerID" RepeatColumns="10" RepeatDirection="Horizontal"
                ItemStyle-VerticalAlign="Top" OnItemCommand="dlManufacturerList_ItemCommand"
                OnItemCreated="dlManufacturerList_ItemCreated">
                <ItemTemplate>
                    <asp:HiddenField ID="hdnManufacturerID" runat="server" Value='<%# Eval("ManufacturerID") %>' />
                    <asp:HiddenField ID="hdnManufacturer" runat="server" Value='<%# Eval("Manufacturer") %>' />
                    <asp:Button ID="BtnManufacturer" runat="server" class="pushButton" Text='<%# Eval("Manufacturer") %>'
                        CommandName="GetCarrier" CommandArgument='<%# Eval("ManufacturerID") %>' /></p>
                </ItemTemplate>
            </asp:DataList>
        </div>
    </ContentTemplate>
</asp:UpdatePanel>
<asp:SqlDataSource ID="SqlManufacturer" runat="server" ConnectionString="<%$ ConnectionStrings:GeexConnString %>"
    SelectCommand="p_Sales_GetManufacturers4Cart" SelectCommandType="StoredProcedure">
    <SelectParameters>
        <asp:ControlParameter ControlID="hdnSelectedCategoryID" ConvertEmptyStringToNull="true"
            PropertyName="Value" DefaultValue="0" Name="CategoryID" Type="Int32" />
    </SelectParameters>
</asp:SqlDataSource>
</div>
<div id="divCarrier">
<div id="divCarrierInner">
//datalist here
</div>
</div>

</div>

代码背后： 

//Level 1: Device category Click
    protected void dlDeviceCategory4Cart_ItemCreated(object sender, DataListItemEventArgs e)
    {
        var control = e.Item.FindControl("BtnDeviceCategory");
        ScriptManager.GetCurrent(Page).RegisterAsyncPostBackControl(control);
    }
    protected void dlDeviceCategory4Cart_ItemCommand(object source, DataListCommandEventArgs e)
    {
        HiddenField hdnDeviceCategoryID = (HiddenField)e.Item.FindControl("hdnDeviceCategoryID");
        HiddenField hdnCategoryName = (HiddenField)e.Item.FindControl("hdnCategoryName");
        if (e.CommandName == "GetManufacturers")
        {
            hdnSelectedCategoryID.Value = hdnDeviceCategoryID.Value;
            lblCategoryName.Text = hdnCategoryName.Value;
            dlManufacturerList.DataBind();
            dlDeviceCategory4Cart.RepeatDirection = RepeatDirection.Vertical;
            ScriptManager.RegisterStartupScript(this, this.GetType(), DateTime.Now.ToString(), "ShiftCategoriesLeft();", true);
            //updateManufacturer.Update();
        }
    }

    //Level 2: Manufacturer Click
    protected void dlManufacturerList_ItemCommand(object source, DataListCommandEventArgs e)
    {
        HiddenField hdnManufacturerID = (HiddenField)e.Item.FindControl("hdnManufacturerID");
        HiddenField hdnManufacturer = (HiddenField)e.Item.FindControl("hdnManufacturer");

        if (e.CommandName == "GetCarrier")
        {
            hdnSelectedManufacturerID.Value = hdnManufacturerID.Value;
            dlCarriers4Cart.DataBind();
            lblManufacturer.Text = hdnManufacturer.Value;

            //updateCarrier.Update();
        }
    }
    protected void dlManufacturerList_ItemCreated(object sender, DataListItemEventArgs e)
    {
        var control = e.Item.FindControl("BtnManufacturer");
        ScriptManager.GetCurrent(Page).RegisterAsyncPostBackControl(control);
    }

Jquery脚本： 

 function ShiftCategoriesLeft() {
            //$("#divMainCateogories").css("display", "none");
            //$("#divDeviceCategoryLeft").html($("#divDeviceCategoryInner").html())

            // Move the div from #divDeviceCategoryInner to #divDeviceCategoryLeft
            //$('#divDeviceCategoryLeft').append($("#divDeviceCategoryInner").html());

        }

现在，它在这里复制div内容并且不会替换它也会丢失事件......！ 此处没有母版页 enter image description here 帮助Appreicated！

0 个答案:

没有答案
相关问题
最新问题