2012-06-20 16 views
8

¿Es posible detener la clasificación de tablas si el usuario hace clic en div dentro del encabezado de la tabla th?jQuery Clasificador de tablas: detener la clasificación

En mi caso div tiene la función onClick="resize(e)" en la que hago:

function resize(e) { 
     if (!e) var e = window.event; 
     e.stopPropagation(); 
     .... 

Pero no funciona.

Editar: tabla se ordena antes e.stopPropagation() o return false

+1

lugar de utilizar el atributo 'onClick', prueba a poner un evento de clic usando jQuery (algo así como' $ ("div th") haga clic en (function (event) {}).; 'y ponga su código de cambio de tamaño en esa función. Entonces' event.stopPropagation() 'podría funcionar. – MrOBrian

+0

Gracias, pero también lo he intentado como Ajay beni indicó – andriy

+0

¿Puede mostrar un código en vivo o preferiblemente un [jsfiddle] (http://jsfiddle.net) – Jashwant

Respuesta

7

Hice dos demos para ti. El primero tiene el contenido del encabezado de la tabla envuelto en un lapso y el segundo usa la función no documentada onRenderHeader para agregar el span dentro del encabezado. De cualquier manera, solo el contenido del span se puede hacer clic (el texto) mientras se hace clic fuera del contenido ordenará la columna. Si usa un div, solo el relleno del encabezado está disponible para inicializar una ordenación de columna.

Demo 1 - contenidos de cabecera envueltos en el marcado

$('table') 
    .tablesorter() 
    .find('.inner-header') 
    .click(function(){ 
     console.log('header text clicked'); 
     return false; 
    }); 

Demo 2 - contenido de la cabecera envuelto utilizando la opción

$('table').tablesorter({ 

    // customize header HTML 
    onRenderHeader: function(index) { 
     $(this) 
      .wrapInner('<span class="inner-header"/>') 
      .find('.inner-header') 
      .click(function(){ 
       console.log('header text clicked'); 
       return false; 
      }); 
    } 

});​ 

onRenderHeader Si necesita más información sobre cómo utilizar la opción onRenderHeader, echa un vistazo a mi blog post en lo que falta en los documentos.

4

Detener propagación prevenir evento desde burbujeando pero que desea cancelar la acción predeterminada que debe utilizar event.preventDefault()

+0

No funciona. La tabla se ordena primero y luego se invoca esta función. ¿Cómo hacer que esta función se ejecute antes de ordenar la tabla? – andriy

+0

Querido Andriy, creo que depende de su estructura html. Supongamos que tiene un escenario como

y luego, si adjunta un evento onclick a TH, el evento pasará de div a TH y luego dentro de la función onclick podrá verificar el origen del evento y si es div puede usar stoppropogation para detener el burbujeo evento a TH por lo que el evento de clasificación principal no se disparará –

+0

Aún ordenando: \ por fuente de evento quiso decir 'if (event.srcElement.className ==" resizer ")'? – andriy

4

Acabo de toparme con este problema exacto. Intenté todo lo sugerido, incluida la asignación directa de un controlador de eventos no delegado al elemento preciso que quería, y luego detener toda la propagación + el evento en sí. Todavía sin suerte.

Pero .... resulta que el tablesorter jQuery asigna un evento para el evento mouseup, no es el caso clic (como era de esperar!). Entonces, para evitar que tablesort lo haga, solo tiene que cancelar ese evento. Espero que esto ayude.

  • Ben
Cuestiones relacionadas