Jak możemy ustawić dynamiczną nazwę nagłówka. jest przekazywany z formatu JSON. Chcę również wiedzieć, jak możemy ukryć wiele kolumn, np. Masz przykład ukrycia jednej kolumny, ale chcę ukryć wiele kolumn i chcę, aby po kliknięciu przycisku były wyświetlane te same kolumny.

Te funkcje lub pytania są związane z tabelą porównawczą, którą przygotowujemy za pomocą tabulatora, w którym chcę porównać wiele konkretnych kolumn i chcę ukryć kolumny, których nie chcę widzieć, i pokazać je ponownie, jeśli chcę

0
Gaurank 18 listopad 2019, 14:29

2 odpowiedzi

Tabulator ma opcję automatycznego generowania nazw kolumn na podstawie nazw właściwości danych wiersza.

Możesz to włączyć, ustawiając opcję autoColumns na true:

var table = new Tabulator("#example-table", {
    data:tabledata,
    autoColumns:true,
});

Spójrz na Przykład kolumn automatycznych, aby zobaczyć, jak działa.

Aby ukryćwiele kolumn musisz wielokrotnie wywołać funkcję hideColumn lub showColumn Jeśli wolisz, aby tabela jest odświeżany tylko raz w tym czasie, możesz użyć funkcji blockRedraw, aby zapobiec ponownemu rysowaniu tabeli do czasu zakończenia aktualizacji:

table.blockRedraw(); //block table redrawing

table.hideColumn("name") //hide the "name" column
table.hideColumn("age") //hide the "age" column

table.restoreRedraw(); //restore table redrawing
1
Oli Folkerd 24 grudzień 2019, 17:53

Aby ukryć kolumnę musisz dodać visible:false jako argument wewnątrz deklaracji tabeli.

Przykład:

columns:[{title: "Test Column", field: "test", sorter:"number", width: 100,visible:false}]

Aby ukryć/pokazać wiele kolumn, najpierw musisz określić, która kolumna ma być ukryta/ukryta

Prostym podejściem jest utworzenie tablicy obiektów stanów logicznych, takich jak:

var visibility =[];
visibility.push({col1_Status:true,col2_Status:true,col3_Status:false});

Wtedy inicjalizacja tabeli będzie wyglądać tak:

columns:[{title: "Test Col1", field: "test1", sorter:"number", width: 100,visible:visibility[0].col1_Status},
{title: "Test Col2", field: "test2", sorter:"number", width: 100,visible:visibility[0].col2_Status},
{title: "Test Col3", field: "test3", sorter:"number", width: 100,visible:visibility[0].col3_Status}]

Teraz możesz pobrać swoje dane Jasona i zmienić widoczność zgodnie ze swoimi potrzebami.

Powyższa procedura działa również niezależnie. W dowolnym momencie możesz uzyskać dostęp do wielu wartości tablicy, zmienić ich status i ponownie zaktualizować tabulator, aby ukryć/pokazać kolumny.

Możesz zastosować tę samą metodę z nazwą kolumny, zmieniając również title: Zauważ, że po zainicjowaniu kolumny w tabeli nie można jej zmienić. Jedynym sposobem zmiany Nagłówka (również danych) jest usunięcie istniejącej kolumny i zastąpienie jej inną.

Aby tak się stało, użyj: table.deleteColumn("Column Name Here");

table.addColumn({title:"Name", field:"name"});

Mam nadzieję, że to pomoże!

0
George Gotsidis 19 listopad 2019, 17:20