Question

我有一个ASP.NET项目，它在表单中使用了许多UpdatePanel控件。

我正在尝试在保持UpdatePanel功能的同时对页面进行排序。这个页面的行为是这样的：

ID为#formContainer的div包含表单
表单包含一个每10秒触发一次的Timer控件
表单包含几个非常相似的div，其中包含用于查看SQL数据的DetailsView控件
每个div都有一个UpdatePanel
UpdatePanel在Timer控件上运行，SQL数据每10秒更新一次
如果特定tr == x的文本值，则div显示在页面上
如果相同的tr == y的文本值，则div被隐藏（jQuery）

这很好用，但我想按字母顺序对所有这些div进行排序，当页面加载时，以及div被隐藏或显示在页面上。当我对它们进行排序时，表单中的所有内容都会停止工UpdatePanel，onClick函数，一切。

这是代码......

HTML

<div class="col-10" id="formContainer">

    <form id ="form1" runat="server">

        <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true" EnablePageMethods="true" />

        <asp:Timer ID="Timer1" runat="server" Interval="10000" OnTick="Timer1_Click" Enabled="True" />

        <div class="square" id="myDiv1">
            <div class="profileContainer">
                <div class="profilePicContainer">
                    <div class="myPic1"></div>
                </div>
                <div class="profileContent">
                    <div class="table">
                        <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="True">
                            <Triggers>
                                <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
                                <asp:AsyncPostBackTrigger ControlID="btn1" EventName="Click" />
                            </Triggers>
                            <ContentTemplate>
                                <asp:Button ID="btn1" runat="server" Text="Button" OnClick="btn1_Click" />
                                <asp:DetailsView ID="DetailsView1" runat="server" AutoGenerateRows="False" DataSourceID="SqlDataSource1" CssClass="Grid" RowStyle-HorizontalAlign="Center" DataKeyNames="PhysicalAddress">                                    
                                    <Fields>
                                        <asp:BoundField DataField="OwnerName" HeaderText="OwnerName" ShowHeader="False" SortExpression="OwnerName" >
                                            <ControlStyle BorderStyle="None" />
                                            <ItemStyle BorderStyle="None" />
                                            </asp:BoundField>
                                        <asp:BoundField DataField="Building" HeaderText="Building" ShowHeader="False" SortExpression="OwnerName" ItemStyle-CssClass="altText" >
                                            <ControlStyle BorderStyle="None" />
                                            <ItemStyle BorderStyle="None" />
                                            </asp:BoundField>
                                        <asp:BoundField DataField="TimeOn" HeaderText="TimeOn" ShowHeader="False" SortExpression="OwnerName" >
                                            <ControlStyle BorderStyle="None" />
                                            <ItemStyle BorderStyle="None" />
                                            </asp:BoundField>
                                        <asp:BoundField DataField="IPAddress" HeaderText="IPAddress" ShowHeader="False" SortExpression="OwnerName" ItemStyle-CssClass="hide" >
                                            <ControlStyle BorderStyle="None" />
                                            <ItemStyle BorderStyle="None" />
                                            </asp:BoundField>
                                        <asp:BoundField DataField="Available" HeaderText="Available" ShowHeader="False" SortExpression="OwnerName" ItemStyle-CssClass="hide" >
                                            <ControlStyle BorderStyle="None" />
                                            <ItemStyle BorderStyle="None" />
                                            </asp:BoundField>
                                        <asp:BoundField DataField="Unavailable" HeaderText="Unavailable" ShowHeader="False" SortExpression="OwnerName" ItemStyle-CssClass="hide" >
                                            <ControlStyle BorderStyle="None" />
                                            <ItemStyle BorderStyle="None" />
                                            </asp:BoundField>
                                    </Fields>
                                    <RowStyle HorizontalAlign="Center" />                                    
                                </asp:DetailsView>
                            </ContentTemplate>
                        </asp:UpdatePanel>
                    </div>
                </div>
            </div>
        </div>
        <div class="square" id="myDiv2">
            <div class="profileContainer">
                <div class="profilePicContainer">
                    <div class="myPic2"></div>
                </div>
                <div class="profileContent">
                    <div class="table">
                        <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="true">
                            <Triggers>
                                <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
                                <asp:AsyncPostBackTrigger ControlID="btn2" EventName="Click" />
                            </Triggers>
                            <ContentTemplate>
                                <asp:Button ID="btn2" runat="server" Text="Button" OnClick="btn2_Click" />                                  
                                <asp:DetailsView ID="DetailsView2" runat="server" AutoGenerateRows="False" DataSourceID="SqlDataSource2" CssClass="Grid" DataKeyNames="PhysicalAddress">
                                    <Fields>
                                        <asp:BoundField DataField="OwnerName" HeaderText="OwnerName" ShowHeader="False" SortExpression="OwnerName">
                                            <ControlStyle BorderStyle="None" />
                                            <ItemStyle BorderStyle="None" />
                                        </asp:BoundField>
                                        <asp:BoundField DataField="Building" HeaderText="Building" ShowHeader="False" SortExpression="Building" ItemStyle-CssClass="altText">
                                            <ControlStyle BorderStyle="None" />
                                            <ItemStyle BorderStyle="None" />
                                        </asp:BoundField>
                                        <asp:BoundField DataField="TimeOn" HeaderText="TimeOn" ShowHeader="False" SortExpression="TimeOn">
                                            <ControlStyle BorderStyle="None" />
                                            <ItemStyle BorderStyle="None" />
                                        </asp:BoundField>
                                        <asp:BoundField DataField="IPAddress" HeaderText="IPAddress" ShowHeader="False" SortExpression="IPAddress" ItemStyle-CssClass="hide">
                                            <ControlStyle BorderStyle="None" />
                                            <ItemStyle BorderStyle="None" />
                                        </asp:BoundField>
                                        <asp:BoundField DataField="Available" HeaderText="Available" ShowHeader="False" SortExpression="Available" ItemStyle-CssClass="hide">
                                            <ItemStyle CssClass="hide" />
                                        </asp:BoundField>
                                        <asp:BoundField DataField="Unavailable" HeaderText="Unavailable" ShowHeader="False" SortExpression="OwnerName" ItemStyle-CssClass="hide">
                                            <ControlStyle BorderStyle="None" />
                                            <ItemStyle BorderStyle="None" />
                                        </asp:BoundField>
                                    </Fields>
                                    <RowStyle HorizontalAlign="Center" />
                                </asp:DetailsView>
                            </ContentTemplate>
                        </asp:UpdatePanel>
                    </div>
                </div>
            </div>
        </div>

这些div中有更多，但我提供了2。

这是我尝试对它们进行排序。它有效，但表格中的所有内容都会破坏......

Javascript排序

$(function () {

var $divs = $("div.square");

var alphaSort = $divs.sort(function (a, b) {

    return $(a).find('tr:eq(1)').find('td').text() > $(b).find('tr:eq(1)').find('td').text();

})

alphaSort.each(function () {
    $("#formContainer").append(this);

    })
});

显示/隐藏div的Javascript

//When document is ready, run foreach on .Grid class

//if the .square string does not contain 10., (an IP address), the hide the that div, and add their name to the offline list...

$('.square').each(function () {

    //convert each .square class div toString
    var square = $(this).html().toString();

    //for each .square in the dom, if 10. is not found, hide this div, then add the OwnerName to the offline list...
    if (square.indexOf("10.") === -1) {

        $(this).hide();

    }

    //if any .square html string does not contain 'True', (Availability column bit value 0), then turn that div red and show $(this).find('tr:eq(5)').find('td') - 'Unvailable for Dispatch"

    if (square.indexOf("True") === -1) {

        $(this).addClass("red");

        $(this).find("p").removeClass("p").addClass("show");

        $(this).find('tr:eq(5)').find('td').removeClass("hide").addClass("unavailable");

    }        

})

//})

//do the same thing in each UpdatePanel when they update

//$(document).ready(function () {

var prm = Sys.WebForms.PageRequestManager.getInstance();

prm.add_endRequest(function () {

    $('.square').each(function () {

        var square = $(this).html().toString();

        if (square.indexOf("10.") === -1) {

            $(this).hide();

        }

        else { $(this).show(); }

        if (square.indexOf("True") === -1) {

            $(this).addClass("red");

            $(this).find("p").removeClass("p").addClass("show");

            $(this).find('tr:eq(5)').find('td').removeClass("hide").addClass("unavailable");

        }

        else { $(this).removeClass("red"); }

})

})

关于以排序的顺序将这些div添加到dom的任何建议，但是非常感谢保持表格的参考。

谢谢！

Answer 1

因为你创建了新元素。所以你需要改变你的事件触发器：

$('mybuttonSelector').click(function(){});

到

$('#formContainer').on('click', 'mybuttonSelector', function(){});

附加div以对其进行排序而不替换

1 个答案: