随机序列的html div标签位置

时间:2014-01-13 15:38:42

标签: c# jquery asp.net gridview random

此GridView中有四个Div标记带有ID="NUMBER1" ID="NUMBER2" ID="NUMBER3" ID="NUMBER4"值,我想在页面的每一行中随机更改其位置的顺序gridview。 什么是最好和最简单的SERVER SIDE方法来做到这一点。 我是使用C#语言的asp.net的新手。

<body>
    <asp:GridView OnRowCommand="SelectedPollGridView_RowCommand" ID="SelectedPollGridView" runat="server" AutoGenerateColumns="False" DataKeyNames="QuesID" DataSourceID="SelectedPollSqlDataSource">
        <Columns>
            <asp:TemplateField HeaderText="Questions">
                <ItemTemplate>
                    <div runat="server" id="MainDiv" class="text-right col-md-12">
                        <div class="row ">
                            <div dir="rtl" class="col-md-12 text-right">
                                <p runat="server" id="BodyPTag"><%#Eval("Body") %></p>
                                <asp:Label Visible="false" ID="QuesIDLabel" runat="server" Text='<%#Eval("QuesID") %>'></asp:Label>
                            </div>
                        </div>
                        <div id="NUMBER1" runat="server" class="row ">
                            <div class="col-md-12">
                                <div dir="rtl" runat="server" id="Div2" class="text-right col-md-11">
                                    <asp:Label ID="Label1" runat="server" Text='<%#Eval("O1") %>'></asp:Label>
                                </div>
                                <div runat="server" id="Div3" class="text-right col-md-1">
                                    <asp:Button CommandArgument='<%# ((GridViewRow) Container).RowIndex %>' CommandName="O1" CssClass='<%#Eval("O1Css") %>' ID="O1Button" runat="server" Text="Option 1" />
                                </div>
                            </div>
                        </div>
                        <div id="NUMBER2" runat="server" class="row ">
                            <div class="col-md-12">
                                <div dir="rtl" runat="server" id="Div4" class="text-right col-md-11">
                                    <asp:Label ID="Label2" runat="server" Text='<%#Eval("O2") %>'></asp:Label>
                                </div>
                                <div runat="server" id="Div5" class="text-right col-md-1">
                                    <asp:Button CommandArgument='<%# ((GridViewRow) Container).RowIndex %>' CommandName="O2" CssClass='<%#Eval("O2Css") %>' ID="O2Button" runat="server" Text="Option 2" />
                                </div>
                            </div>
                        </div>
                        <div id="NUMBER3" runat="server" class="row ">
                            <div class="col-md-12">
                                <div dir="rtl" runat="server" id="Div6" class="text-right col-md-11">
                                    <asp:Label ID="Label3" runat="server" Text='<%#Eval("O3") %>'></asp:Label>
                                </div>
                                <div runat="server" id="Div7" class="text-right col-md-1">
                                    <asp:Button CommandArgument='<%# ((GridViewRow) Container).RowIndex %>' CommandName="O3" CssClass='<%#Eval("O3Css") %>' ID="O3Button" runat="server" Text="Option 3" />
                                </div>
                            </div>
                        </div>
                        <div  id="NUMBER4" runat="server" class="row ">
                            <div class="col-md-12">
                                <div dir="rtl" runat="server" id="Div8" class="text-right col-md-11">
                                    <asp:Label ID="Label4" runat="server" Text='<%#Eval("O4") %>'></asp:Label>
                                </div>
                                <div runat="server" id="Div9" class="text-right col-md-1">
                                    <asp:Button CommandArgument='<%# ((GridViewRow) Container).RowIndex %>' CommandName="O4" CssClass='<%#Eval("O4Css") %>' ID="O4Button" runat="server" Text="Option 4" />
                                </div>
                            </div>
                        </div>
                    </div>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>
    <asp:SqlDataSource ID="SelectedPollSqlDataSource" runat="server" ConnectionString="<%$ ConnectionStrings:GUOTSConnectionString %>" SelectCommand="SELECT DISTINCT QuesID, Body, O1, O2, O4, O3, O1Css, O2Css, O4Css, O3Css, Time, BookRange, UserID, CourseID, Code FROM Question WHERE (UserID = @userid) AND (Code = @code)">
        <SelectParameters>
            <asp:QueryStringParameter Name="code" QueryStringField="code" />
            <asp:SessionParameter Name="userid" SessionField="userid" />
        </SelectParameters>
    </asp:SqlDataSource>
</body>

1 个答案:

答案 0 :(得分:2)

以下将做你想做的事。

Working FIDDLE here

首先,更改当前的div,为每一行提供一个我们可以在脚本中选择的类名,如“randomDiv”。我们可以使用“行”,但我担心你在更多的地方使用它而不仅仅是这些div。

<div id="NUMBER1" runat="server" class="row randomDiv">

然后在文档准备好运行以下javascript:

<script>
    $(document).ready(function() {

        var divs= $(".randomDiv");
        for(var i = 0; i < divs.length; i++){
            var target = Math.floor(Math.random() * divs.length -1) + 1;
            var target2 = Math.floor(Math.random() * divs.length -1) +1;
            divs.eq(target).before(divs.eq(target2));
        }

    });
</script>