Липкие заголовки табулятора без использования аргумента высоты - PullRequest
Новая
       29

Липкие заголовки табулятора без использования аргумента высоты

0 голосов
/ 14 апреля 2020

Я хочу иметь закрепленные заголовки в Табуляторе и не хочу использовать переменную высоты при создании таблицы. Любые идеи очень приветствуются. 

var table = new Tabulator("#example-table", {
        height:"100px", // Sticky header works
        // height:false,// Use instead of height:"100px", sticky header fails
        // leaving the height argument out, sticky header fails
        columns:[
            {title:"Name", field:"name"},
            {title:"Progress", field:"progress", align:"right", sorter:"number"},
            {title:"Gender", field:"gender"},
            {title:"Rating", field:"rating", align:"center"},
            {title:"Date Of Birth", field:"dob", align:"center", sorter:"date"}
        ],
        data: [
            {id:1, name:"Oli Bob", progress:12, gender:"male", rating:1,  dob:"14/04/1984", car:1},
            {id:2, name:"Mary May", progress:1, gender:"female", rating:2,  dob:"14/05/1982", car:true},
            {id:3, name:"Christine Lobowski", progress:42, gender:"female", rating:0,  dob:"22/05/1982", car:"true"},
            {id:4, name:"Brendon Philips", progress:100, gender:"male", rating:1,  dob:"01/08/1980"},
            {id:5, name:"Margret Marmajuke", progress:16, gender:"female", rating:5,  dob:"31/01/1999"},
            {id:6, name:"Frank Harbours", progress:38, gender:"male", rating:4, dob:"12/05/1966", car:1},
            {id:7, name:"Jamie Newhart", progress:23, gender:"male", rating:3, dob:"14/05/1985", car:true}
        ]
});

Пожалуйста, посмотрите / запустите это jsfiddle .

Ответы [ 2 ]

0 голосов
/ 15 апреля 2020

Решено через @Oli Folkerd (конечно). Использование / обновление до Tabular 4.6 и установка аргумента maxHeight на 100%. Затем таблица будет прокручиваться с помощью липких заголовков внутри элемента контейнера. Отлично и спасибо @Oli Folkerd

Смотрите решение и попробуйте его здесь jsfiddle 

<link href="https://unpkg.com/tabulator-tables@4.6.2/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.6.2/dist/js/tabulator.min.js"></script>
<div class="example-table" id="example-table"/> 

div.example-table {
   height: 150px;
   border: 1px solid black;
}

var table = new Tabulator("#example-table", {
    // height:"100px",  // Sticky header works
    // height:false,        // Use instead of height:"311px", sticky header fails
    // leaving the height argument out, sticky header fails
    maxHeight:"100%", // use this and version 4.6 of Tabulator
    columns:[
        {title:"Name", field:"name"},
        {title:"Progress", field:"progress", align:"right", sorter:"number"},
        {title:"Gender", field:"gender"},
        {title:"Rating", field:"rating", align:"center"},
        {title:"Date Of Birth", field:"dob", align:"center", sorter:"date"}
    ],
    data: [
        {id:1, name:"Oli Bob", progress:12, gender:"male", rating:1, dob:"14/04/1984", car:1},
        {id:2, name:"Mary May", progress:1, gender:"female", rating:2,  dob:"14/05/1982", car:true},
        {id:3, name:"Christine Lobowski", progress:42, gender:"female", rating:0,  dob:"22/05/1982", car:"true"},
        {id:4, name:"Brendon Philips", progress:100, gender:"male", rating:1,  dob:"01/08/1980"},
        {id:5, name:"Margret Marmajuke", progress:16, gender:"female", rating:5,  dob:"31/01/1999"},
        {id:6, name:"Frank Harbours", progress:38, gender:"male", rating:4, dob:"12/05/1966", car:1},
        {id:7, name:"Jamie Newhart", progress:23, gender:"male", rating:3, dob:"14/05/1985", car:true}
]
});
0 голосов
/ 14 апреля 2020

Если вы обновитесь до версии 4.6 и добавите в свою таблицу максимальную высоту 100%, то таблица будет прокручиваться, когда она превысит высоту содержащего элемента.

Таблица должна иметь полосу прокрутки в Порядок для заголовков остается фиксированным, в противном случае он просто обрабатывает таблицу как элемент stati c на странице и не переполняется

...