Question

完全披露，我几天前问过这个问题，但我还在努力，但还没有找到解决方案。我会提供尽可能多的信息，希望能有所帮助。

我有一个带ID #formContainer的div元素。它包含一个ASP表单
表单包含一个每10秒触发一次的Timer控件
表单包含几个非常相似的div元素，它们都包含一个用于查看SqlDataSource数据的DetailsView控件
这些类似的div元素中的每一个都有一个UpdatePanel
每个UpdatePanel都使用表单的Timer控件，以便每10秒钟在每个DetailsView中更新SQL数据

这是页面行为发挥作用的地方......

更新每个DetailsView时：

如果DetailsView中的特定列的文本值== X，则页面上的div 显示
如果同一列的文本值== Y，则div 隐藏（jQuery）

这是我的代码：

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>
                                </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>
                                </Fields>
                                <RowStyle HorizontalAlign="Center" />
                            </asp:DetailsView>
                        </ContentTemplate>
                    </asp:UpdatePanel>
                </div>
            </div>
        </div>
    </div>

代码背后

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    protected void Timer1_Click(object sender, EventArgs e)
    {
        UpdatePanel1.Update();
        DetailsView1.DataBind();
        UpdatePanel2.Update();
        DetailsView2.DataBind();
    }

    protected void btn1_Click(object sender, EventArgs e)
    {
        SqlDataSource1.UpdateParameters["OwnerName"].DefaultValue = "Owner1";
        SqlDataSource1.Update();
        UpdatePanel1.Update();
        DetailsView1.DataBind();
    }

    protected void btn2_Click(object sender, EventArgs e)
    {
        SqlDataSource2.UpdateParameters["OwnerName"].DefaultValue = "Owner2";
        SqlDataSource2.Update();
        UpdatePanel2.Update();
        DetailsView2.DataBind();
    }
}

当更新UpdatePanels时，以下是隐藏或显示每个div元素与.square类的方法......

JS

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

prm.add_endRequest(function () {

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

        //convert each element with class .square to a string
        var square = $(this).html().toString();

        //if square is at locationA OR has no IP, hide it
        if ((square.indexOf("locationA") != -1) || (square.indexOf("10.") === -1)) {

            $(this).hide();

        }

        //else if square is NOT at locationA OR HAS an IP, show it
        else if ((square.indexOf("locationA") === -1) || (square.indexOf("10.") != -1)) {

            $(this).show();                

        }


    })
})

所以，所有这些都有效，但我希望每个.square div元素按字母顺序排列.square的文本值（tr：eq（1）.find（＆＃39; td＆＃39） ;）。text（）。排序工作，但它取代了页面元素，一切都停止工作.UpdatePanels不再更新，其他jQuery点击事件停止工作......

SORT

    $('.square').sort(function (a, b) {

    if ($(a).find('tr:eq(1)').find('td').text() < $(b).find('tr:eq(1)').find('td').text()) {

        return -1;

    }

    else {

        return 1;

    }
}).appendTo('#formContainer');

}）

请告知任何排序这些div的方法，而不是替换它们，以便所有其他功能仍然有效。

谢谢！

使用JS / Jquery以ASP格式移动div

0 个答案: