2011-07-26 11 views
5

tengo el siguiente código que se aplica el plugin de jQuery UI puede ordenar a todas las tablas (GridView) en una página ASP.NET, excluyendo la primera fila (cabecera) en cada uno:Cómo aplicar condicionalmente el widget UI ordenable jQuery a la tabla (ASP.NET GridView)?

function pageLoad() { 
    $('table').sortable({ 
     items: 'tr:not(:first)', 
     axis: 'y', 
     scroll: true, 
     start: startDrag, //store start position 
     stop: stopDrag //get end position, update database 
    }).disableSelection(); 

Sin embargo yo sólo quiero aplicar puede clasificarse en una tabla si hay más de una fila (además de la fila del encabezado); de lo contrario, la funcionalidad de arrastrar/soltar es redundante.

¿Cómo puedo aplicar condicionalmente lo anterior solo a las tablas que tienen más de una fila de contenido? Gracias.

+0

Esto es genial, y muy oportuno ya que necesito algo como eso. 2 preguntas para agregar: 1) startDrag no está definido. Supongo que necesito declararlo en código subyacente, pero ¿qué tipo de datos? 2) Estoy usando esto para permitir que el usuario recurra a una lista ordenada basada en una columna de 'orden' (int). ¿Hay alguna forma eficiente de guardar esto en la base de datos? – nycdan

+0

Tal vez una mejor pregunta es cómo puedo leer las nuevas posiciones en la vista de cuadrícula. Cuando cambio los elementos 0 y 1, y leo gridview1.Rows [0] .Cells [1] .Text sigue mostrando el elemento original. No estoy seguro de cómo leer los elementos de post-clasificación en cada posición. – nycdan

+0

puede verificar el jquery 'index()' regular del elemento descartado, o exportar el estado de posición completa usando 'sortable.serialize()': http://jqueryui.com/demos/sortable/#method-serialize –

Respuesta

5

jquery filter() proporciona una solución. Le permite filtrar un conjunto de elementos combinados utilizando una función de prueba. Por lo tanto el siguiente código se aplica sortable sólo a tablas que tienen más de una fila de datos:

function pageLoad() { 

    $('table').filter(function() { 
         return $('tr', this).length > 2; 
         }) 
       .sortable({ 
       items: 'tr:not(:first)', 
       axis: 'y', 
       scroll: true, 
       start: startDrag, //store start position 
       stop: stopDrag //get end position, update database 
       }) 
       .disableSelection(); 
} 
+0

Funciona perfectamente, gracias! :) –

0

En respuesta a la nydcan consultas anteriormente, el método startDrag se ve así:

function startDrag(event, ui) { 
    var startIndex = ui.item.index(); 
    ui.item.data('startIndex', startIndex); 
} 

Y las miradas método stopDrag de esta manera:

function stopDrag(event, ui) { 
    var startIndex = ui.item.data('startIndex'); 
    var endIndex = ui.item.index(); 
    if (startIndex != endIndex) { 
     $.ajax({ 
      type: 'POST', 
      url: '<%= ResolveUrl("~/MyPage.aspx/UpdateOrder") %>', 
      contentType: 'application/json; charset=utf-8', 
      data: "{ 'startIndex':'" + startIndex + "', 'endIndex':'" + endIndex + "'}", 
      dataType: 'json', 
      success: updateSuccess, 
      error: updateError 
     }); 
    } 
} 

entonces tengo un método web (VB.NET) en mi página de la siguiente manera:

<System.Web.Services.WebMethod()> 
Public Shared Sub UpdateRulePriority(ByVal startIndex As Integer, ByVal endIndex As Integer) 

    'Do stuff 

End Sub 

Espero que ayude.

Cuestiones relacionadas