Footable et capturant l'événement de ligne d'expansion

Question

J'ai cherché n'importe quelle aide raisonnable sur ceci et je continue à revenir aux mêmes commentaires. À savoir pas très bonne documentation.

Je suis sur le point d'utiliser le plugin jquery fooTable qui convertit une table html normale en quelque chose de joli et utilisable.

Il est facile à utiliser avec la commande suivante après avoir placé votre tableau sur la page. Cependant, je veux capturer l'événement quand une ligne est développée.

Voici un exemple de la table en action. J'utilise actuellement le framework Inspinia.

http://wrapbootstrap.com/preview/WB0R5L90S

Vous devez cliquer sur les tables/footables lien de menu sur le côté gauche. Je ne sais pas s'il s'agit d'un problème ou d'un événement fooTable que je devrais connaître ou s'il s'agit de connaissances générales sur la capture d'événements à l'aide de jquery qui s'applique à beaucoup de choses.

Mes connaissances en jquery ne datent que de quelques mois car je suis un programmeur VB, MSSQL de longue date qui apprend quelque chose de nouveau.

Merci à tous ceux qui sont assez aimables pour offrir de la lumière à un débutant!

Neil

Answer 1

Vous pouvez lier des fonctions à certains événements footable:

$('.footable').footable().bind({ 
    'footable_row_collapsed' : function(e) { 
     //Your code when a row is collapsed 
    }, 

    'footable_row_expanded' : function(e) { 
     //Your code when a row is expanded     
    }, 
}); 

Voici la documentation sur l'interception des événements footable (http://fooplugins.com/footable/demos/event-interception.htm#docs).

Voici la liste des événements de footable (http://fooplugins.com/footable/demos/events.htm#docs).

Answer 2

Le manque de documentation sur les footables finira par être la fin de ce produit.

Documentation est maintenant répertorié ici: https://fooplugins.github.io/FooTable/docs/jsdocs/FooTable.html

L'événement d'expansion semble être le plus utilisé. Voici un exemple d'échange de la ligne de détail en utilisant AJAX:

$(".footable").on("expand.ft.row", function (e, ft, row) { 
    var EmployeeId = row.value.EmployeeId //Access data from a specific column 
    var RowElement = $(row.$el) //This is the underlying DOM element for the row (<tr>...</tr>) 
    if (EmployeeId) { 
    $.get({ 
     url: "http://ajax-provider/" + EmployeeId, 
     dataType: "html", 
     success: function (data) { 
     var DetailRow = RowElement.next(".footable-detail-row") 
     DetailRow.children("td").html(data) 
     } 
    }) 
    } 
}