Désactiver les colonnes sous certaines conditions

Question

Je dois désactiver/activer l'entrée de certaines colonnes sous certaines conditions, puis-je le faire avec Tabulator? Colonnes disponibles ou verrouillées à la saisie lorsque j'ouvre la page avec un tableau dans un certain état (booléen ou autre). Merci.

exemple:

//définir des données d'exemple
var tabledata = [
    {
        id: 1,
        name: "Oli Bob",
        age: "12",
        col: "red",
        dob: ""
    },
    {
        id: 2,
        name: "Mary May",
        age: "1",
        col: "blue",
        dob: "14/05/1982"
    },
    {
        id: 3,
        name: "Christine Lobowski",
        age: "42",
        col: "green",
        dob: "22/05/1982"
    },
    {
        id: 4,
        name: "Brendon Philips",
        age: "125",
        col: "orange",
        dob: "01/08/1980"
    },
    {
        id: 5,
        name: "Margret Marmajuke",
        age: "16",
        col: "yellow",
        dob: "31/01/1999"
    },
];

var table_3 = new Tabulator("#table_3", {
    height: 205,
    data: tabledata,
    layout: "fitColumns",
    columns: [
        {
            title: "Nom",
            field: "name",
            width: 150,
            editor: "input"
        },
        {
            title: "Âge",
            field: "age",
            align: "left",
            formatter: "progress",
            editor: "input"
        },
        {
            title: "Couleur préférée",
            field: "col",
            editor: "input"
        },
        {
            title: "Date de naissance",
            field: "dob",
            sorter: "date",
            align: "center",
        },
    ],
});

Comment puis-je désactiver editor: "input" dans certaines conditions?

Answer 1

Vous pouvez passer un rappel à l' option editable dans la définition de colonne, cela passera dans le Composant de Cellule de la cellule en cours d'édition.

Vous pouvez ensuite renvoyer true pour autoriser la modification, ou false pour la rejeter :

///définir l'éditeur
var editCheck = function(cell){
    //cell - le composant de cellule pour la cellule en cours de modification

    //obtenir les données de la ligne
    var data = cell.getRow().getData();

    return data.age > 18; // autoriser uniquement la modification de la cellule de nom si l'âge est supérieur à 18
}

//dans votre définition de colonne pour la colonne
{title:"Nom", field:"name", editor:"input", editable:editCheck}

Tous les détails sont disponibles dans la Documentation sur la Modification