使用c#和jquery拖放gridview问题

时间:2016-07-23 16:12:03

标签: javascript c# jquery asp.net gridview

我正在尝试使用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=1http://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>
                                   &nbsp;
                                   <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>
                                   &nbsp;
                                   <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函数,但它从未上升过。真是令人沮丧。如何拖放,然后在没有按钮的情况下保存数据库中的顺序?非常感谢,希望你能帮助我。

0 个答案:

没有答案