此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>
答案 0 :(得分:2)
以下将做你想做的事。
首先,更改当前的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>