我正在尝试使用jquery库来拖放gridview但是它不起作用,我已经遵循了一些代码示例,如http://www.jquerybyexample.net/2012/03/drag-and-drop-gridview-rows-using.html?m=1或者这个
http://aspdotnet-example.blogspot.com.es/2011/10/gridview-reorder-row-drag-and-drop.html?m=1或http://forums.asp.net/p/1684346/4434790.aspx?Re+tableDnD+onDragClass+not+working+on+asp+net+GRIDVIEW一无所获,我被困住了。我有这个代码。
首先是我掌握的Page Master:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/jquery-ui.min.js"> </script>
<link rel="stylesheet" href="Styles/Coaching.css" type="text/css" />
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"/>
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"/>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<style>
.noselect
{
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
cursor: move;
}
.selected
{
background-color: Lime;
}
</style>
<style type="text/css">
.selected
{
color : White !important;
background-color : Teal !important;
}
</style>
<script type="text/javascript">
var strorder;
$(function () {
$("[id*=grdResultados]").sortable({
items: 'tr:not(tr:first-child)',
cursor: 'pointer',
axis: 'y',
dropOnEmpty: false,
start: function (e, ui) {
ui.item.addClass("selected");
},
stop: function (e, ui) {
ui.item.removeClass("selected");
},
receive: function (e, ui) {
$(this).find("tbody").append(ui.item);
reorder();
$.ajax({
type: "POST",
url: "diagnostico-plantilla.aspx/GridViewReorders",
data: '{"Reorder":"' + strorder + '"}',
contentType: "application/json; charset=utf-8",
dataType: "json",
async: true,
cache: false,
success: function (msg) {
alert("Successfully Save ReOrder");
}
});
}
});
});
function reorder() {
alert("Entrando en reorder");
strorder = "";
var totalid = $('#grdResultados tr td input').length;
for (var i = 0; i < totalid; i++) {
strorder = strorder + $('#grdResultados tr td input')[i].getAttribute("value") + "|";
alert("strorder1");
}
alert("strorder2");
}
然后我有结构,仅此而已。
然后我有aspx,我有这个代码
<asp:ScriptManager id="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel id="UpdatePanel1" runat="server">
<ContentTemplate>
<div class="panel panel-default">
<div class="panel-heading">Dimensiones de las plantillas</div>
<div class="panel-body">
<div class="row">
<div class="col-md-12">
<div class="alert alert-info">
<asp:Literal ID="lResultados" runat="server"></asp:Literal>
</div>
</div>
<div class="col-md-12">
<asp:GridView ID="grdResultados" runat="server" CssClass="table table-hover" AllowPaging="True"
AllowSorting="True" AutoGenerateColumns="False" GridLines="None" DataKeyNames="id" DataSourceID="odsResultados" OnRowDataBound="grdResultados_RowDataBound" OnPageIndexChanged="grdResultados_PageIndexChanged" OnSorting="grdResultados_Sorting" OnRowCommand="grdResultados_RowCommand">
<Columns>
<asp:TemplateField HeaderText="Título" InsertVisible="False" SortExpression="titulo">
<EditItemTemplate>
<asp:TextBox ID="txtTitulo" CssClass="form-control" runat="server" Text='<%# Eval("titulo") %>'></asp:TextBox>
<asp:HiddenField ID="hdnid" runat="server" Visible="true" Value='<%# Bind("id") %>' />
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="lblTitulo" runat="server" Text='<%# Eval("titulo") %>'></asp:Label>
<asp:HiddenField ID="hdnid" runat="server" Visible="true" Value='<%# Bind("id") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Opciones" InsertVisible="False" SortExpression="">
<EditItemTemplate>
<asp:LinkButton ID="cmdActualizar" runat="server" CommandName="actualizar" ToolTip="Actualizar" CssClass="btn btn-success" CommandArgument='<%# Eval("id") %>'><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></asp:LinkButton>
<asp:LinkButton ID="cmdCancelar" runat="server" CommandName="Cancel" ToolTip="Cancelar" CssClass="btn btn-default"><span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span></asp:LinkButton>
</EditItemTemplate>
<ItemTemplate>
<asp:LinkButton ID="cmdEditar" runat="server" CommandName="Edit" ToolTip="Editar" CssClass="btn btn-default"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></asp:LinkButton>
<asp:LinkButton ID="cmdEliminar" runat="server" CommandName="eliminar" OnClientClick="return confirm('¿Desea elimnar la dimensión?');" CommandArgument='<%# Eval("id") %>'><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:ObjectDataSource ID="odsResultados" runat="server"
OldValuesParameterFormatString="original_{0}" SelectMethod="GetDataByIdPlantilla"
onselected="odsResultados_Selected" TypeName="eFileCoachWP.DiagnosticosPlantillas.dsPlantillasTableAdapters.diagnosticos_plantillas_dimensionesTableAdapter" OnSelecting="odsResultados_Selecting">
<SelectParameters>
<asp:Parameter Name="idPlantilla" Type="Int64" />
</SelectParameters>
</asp:ObjectDataSource>
</div>
还有更多的代码,我认为这不是必要的。在后面的代码中,我调用了GridViewReorders函数,但它从未上升过。真是令人沮丧。如何拖放,然后在没有按钮的情况下保存数据库中的顺序?非常感谢,希望你能帮助我。