handsontable: cacher certaines colonnes sans modifier les données de tableau/objet

J'ai données à afficher dans la grille. Je suis à l'aide de handsontable pour afficher les données. Chaque 3ème colonne est calculée comme la différence des deux précédents (par exemple, la 3ème colonne est rendu comme la somme de la 1ère et de la 2ème colonne; cela se fait par la coutume convertisseur prenant la somme des i-1 et i-2 colonnes).

C'est ma coutume rendu de la "différence" colonnes:

var val1 = instance.getDataAtCell(row, col - 1),
    val2 = instance.getDataAtCell(row, col - 2),
    args = arguments;
        args[5] = val2 - val1;
        if (args[5] !== 0) {
            $(td).addClass('grid-column-class-nonzero');
        }
        Handsontable.renderers.NumericRenderer.apply(this, args);

J'ai besoin d'avoir un "switch". Ce commutateur afficher/masquer les colonnes. Si l'interrupteur est SUR, puis j'ai besoin d'afficher toutes les colonnes. Si l'interrupteur est sur OFF, j'ai besoin d'afficher uniquement les colonnes qui contient des différences.
Donc, pouvez-vous suggérer - comment masquer des colonnes dans hansontable?

EDIT: j'ai mis à jour mon code comme suggéré par @ZekeDroid.

 //on 'switch click' I modify colsToHide global array and do table re-render
 $('#my-id').handsontable('render');

Et c'est ma coutume moteur de rendu pour les colonnes qui doit être caché/montré basé sur l'interrupteur:

var colsToHide = [];
var classModel1Renderer = function (instance, td, row, col, prop, value, cellProperties) {
    "use strict";
    if (colsToHide.indexOf(col) > -1) {
        td.hidden = true;
    } else {
        td.hidden = false;
    }

    Handsontable.renderers.TextRenderer.apply(this, arguments);
    $(td).addClass('grid-column-class-model1');
};

Ce code en effet masque/affiche les colonnes, mais il ne fonctionne pas pour l'en-tête de colonne.

OriginalL'auteur renathy | 2015-03-01

  1. 3

    Yup il existe une solution simple si vous êtes en utilisant un moteur de rendu personnalisé déjà. J'ai posté la solution dans cette question ici. Essentiellement, vous pouvez avoir un tableau avec la colonne indices que vous voulez masquer et dans la coutume de rendu (car il est appelé pour chaque cellule de votre tableau) ne td.hide() si col est une colonne que vous souhaitez caché.

    Après vérification dans IE, il s'avère que cette solution fonctionne toujours. Si quelque chose vous pouvez utiliser td.style.display = 'none' et 'auto' pour masquer/afficher la div. Mais le problème n'est pas le cacher, c'est avec le onkeydown événement que j'ai rapidement écrit à des fins d'enseignement. Je suis sûr que vous pouvez comprendre que la partie sur votre propre comme il est hors de la portée de cette question.

    Pour masquer l'en-tête de colonne, utiliser jQuery pour trouver le <th> que vous souhaitez masquer. Une façon est de demander à tous d'entre eux, alors l'utilisation d'une fonction de filtre sur le texte jusqu'à ce qu'il correspond à l'en-tête que vous voulez. C'est cher, O(n) solution donc si j'étais vous, je ferais une fois au début du script, enregistrer une carte d'index de colonne de <th>, et ensuite travailler qui.

    Nouvelle Technique:

    Regarder cette jsFiddle pour plus d'info. Vous avez eu raison, car cette méthode est désordonné et pas trop efficace donc j'ai codé quelque chose de moins salissant, mais encore hacky. Au lieu de changer le rendu, on peut masquer des colonnes par la mise à jour de la columns option. Si l'on regarde le nouveau code, ce qu'il fait maintenant est de mettre à jour le tableau de colonnes, et les en-têtes de colonne. Cela se rapproche plus d'un vrai colonne cacher fonctionnalité avec le recul que ça ne se garde pas de tri ou de réorganiser les lignes/colonnes. Si c'était aussi une exigence pour votre application, puis je vais garder un oeil avec vous sur la question que vous avez soulevée sur le git du projet et espérer pour le mieux 🙂

    Laissez-moi savoir si cette nouvelle méthode qui fonctionne pour vous.

    Ceci ne doit pas masquer l'en-tête des colonnes.
    De plus, votre code (ni jsfiddle exampel, ni mon code que j'ai écrit basé sur le vôtre) ne fonctionne pas sous IE (j'ai essayé IE 10).
    voyons, pour l'en-tête des colonnes, c'est une seule cellule de sorte que vous pouvez le trouver facilement, avec jQuery par exemple. Et aussi loin que IE soutien va...c'est assez trivial solution que j'ai trouvé au bout de deux secondes de recherche sur google. Je vais modifier le jSfiddle et ma réponse à inclure ces choses.
    Unfourtunately je ne suis pas encore en mesure de masquer les en-tête des colonnes. Nous avons upgrated à la dernière handsontable version et si j'ajoute th se cachant de sélecteur dans le moteur de rendu, ils s'affichent toujours. Je ne comprends pas ceci: "faites ceci une fois au début du script, enregistrer une carte d'index de colonne <th>, et ensuite travailler."
    Les événements lorsque l'utilisateur navigue avec les flèches - c'est aussi un problème, mais je ne peux pas commencer à enquêter sur elle alors que je n'ai pas fait d'en-tête de la clandestinité.

    OriginalL'auteur ZekeDroid

  2. 5

    Vous pouvez utiliser colWidths de réduire la largeur d'une colonne spécifique de 0,1 pixel. Techniquement, c'est toujours une partie de la table et .getData() returnes les données de la colonne, mais à l'œil humain, c'est invisible. Si vous obtenez beaucoup de colonnes, que l'0.1 pixel colonnes de la pile jusqu'à être visible, vous pouvez toujours ajouter plus de zéros derrière la virgule pour réduire les colonnes avec de nouveau 🙂

    handsontable.updateSettings({
    colWidths: [0.1,0.1,50],
});

    Cet exemple serait "cacher" les deux premières colonnes et de montrer la troisième colonne, avec 50 px.

    PS. Pour masquer la première colonne, je recommande une largeur de 1px, de sorte que la colonne frontières de la deuxième colonne n'a pas l'air incomplet

    Je suis curieux de savoir pourquoi 0.1 et pas simplement à zéro?
    C'était la meilleure solution pour moi, car il laisse de la colonne dans les dom mais il la cache correctement sans un hacky JS solution. HandsonTable PRO a caché les colonnes de plugin, mais je n'utilise que l'Édition de la Communauté, donc c'était parfait pour moi!

    OriginalL'auteur Sst

  3. 0

    Pour masquer l'en-tête de colonnes que vous pouvez utiliser afterGetColHeader fonction de rappel et de le cacher. Dans mon cas, j'ai stocké les noms de colonne pour être caché, séparée de tableau et de les vérifier à l'aide indexOf fonction

     afterGetColHeader:function(col,th){
                                    currentCoulmn = data.headers[col];
                                    if(hiddenColumns.indexOf(currentCoulmn.fieldName) > -1 ){
                                        th.style.display='none';
                                    }

                                },

    OriginalL'auteur Infant Rosario

  4. 0
    hot.addHook('afterGetColHeader', RemoveUnWantedHeader); 
function RemoveUnWantedHeader(col, th) {
if (th.textContent == "A" || th.textContent == "B" || th.textContent == "C" 
|| th.textContent == "D" || th.textContent == "E"
|| th.textContent == "F" || th.textContent == "G" || th.textContent == 
"H" 
|| th.textContent == "I" || th.textContent == "J"
|| th.textContent == "K" || th.textContent == "L" || th.textContent == 
"M" 
|| th.textContent == "N" || th.textContent == "O"
|| th.textContent == "P" || th.textContent == "Q" || th.textContent == 
"R" 
|| th.textContent == "S" || th.textContent == "T"
|| th.textContent == "U" || th.textContent == "V" || th.textContent == 
"W" 
|| th.textContent == "X" || th.textContent == "Y" || th.textContent == 
"Z"
|| th.textContent == "AQ" || th.textContent == "AR" || th.textContent == 
"AS"
|| th.textContent == "AT" || th.textContent == "AU" || th.textContent == 
"AV" || th.textContent == "AW") {
th.style.display = 'none';
}
}

    J'ai utilisé crochet pour retirer les en-têtes j'en ai besoin. J'ai essayé la même à l'intérieur de mon HandsonTable il ne fonctionne pas donc j'ai essayé la même chose en utilisant addHook et a travaillé comme un charme.

    afterGetColHeader: C'est une fonction qui sera rendu lors de l'en-tête est appelé.

    RemoveUnWantedHeader: C'est ma propre fonction de rappel. Vous pouvez avoir vos propres conditions et peut les supprimer.

    OriginalL'auteur Eliotjse