Табулятор - HeaderSorting

52
6

Я делаю много сырых HTML-таблиц и конвертирую их в табулятор с помощью

var table = new Tabulator("#main", {
layout:"fitColumns",
tooltipsHeader:true,
pagination:"local",
paginationSize:10,
persistenceMode:"true",
});

и придется отключить сортировку заголовков на некоторых из них.

Документация и ответы на подобные вопросы все указывают на использование

{title:"Name", field:"name", sorter:"string", headerSort:false}

для столбцов, которые вы хотите включить сортировку.

Что я хочу сделать, это, но не работает

var table = new Tabulator("#main", {
layout:"fitColumns",
tooltipsHeader:true,
pagination:"local",
paginationSize:10,
persistenceMode:"true",
headerSorting:"false",
});

Вопрос: Могу ли я отключить сортировку в данной таблице с помощью параметра инициализации, аналогичного приведенному выше коду, или это возможно только при инициализации каждого столбца, что я не хочу делать, поскольку таблиц довольно много и они имеют разные измерения.

спросил(а) 2019-05-09T13:32:00+03:00 11 месяцев назад
1
Решение
52

<th tabulator-headersort="false" >@ColumnName</th>

это правильный способ сделать это при преобразовании сгенерированных Razor HTML-таблиц в таблицы табуляторов JS и отключении заголовков. Документы не подходят для использования атрибута HTML tabulator-, поэтому некоторые люди могут не быть

В Tabulator 4.2 было исправлено так, что атрибуты на основе верблюдов работали с преобразованиями HTML> Tabulator. tabulator- headerSort - пример того, что не работало до исправления 4.2. Это довольно удобный способ создания пользовательских таблиц, основанный на том, что возвращает модель бритвы, вместо того, чтобы делать все это в JS

ответил(а) 2019-05-13T19:50:00+03:00 10 месяцев, 4 недели назад
36

Разобрался с решением моей проблемы. Нет дополнительных определяющих столбцов.

Просто добавил это в мои тэги:

<th tabulator-headersort="false" >@ColumnName</th>

Табулятор захватывает этот атрибут элемента и делает именно то, что я хотел.

Использование версии 4.2 к вашему сведению

ответил(а) 2019-05-10T15:29:00+03:00 11 месяцев назад
37

Вы должны headerSort: false в определении столбца каждый раз, когда вы создаете таблицу, но если вы действительно хотите удалить кнопку сортировки, вы можете запустить приведенный ниже код

const tabledata1 = [{
id: 1,
name: "Oli ",
money: "0",
col: "red",
dob: ""
},
{
id: 2,
name: "Mary ",
money: "0",
col: "blue",
dob: "14/05/1982"
},
{
id: 3,
name: "Christine ",
money: "0",
col: "green",
dob: "22/05/1982"
},
{
id: 4,
name: "Brendon ",
money: "0",
col: "orange",
dob: "01/08/1980"
},
{
id: 5,
name: "Margret ",
money: "0",
col: "yellow",
dob: "31/01/1999"
},
];

const col1 = [ //Define Table Columns
{
title: "Name",
field: "name",
width: 150
},
{
title: "money",
field: "money",
align: "left",
formatter: "money"
},
{
title: "Favourite Color",
field: "col"
},
{
title: "Date Of Birth",
field: "dob",
sorter: "date",
align: "center"
},
];

const col2 = [ //Define Table Columns
{
title: "Name",
field: "name",
width: 150,
headerSort: false
},
{
title: "money",
field: "money",
align: "left",
formatter: "money",
headerSort: false

},
{
title: "Favourite Color",
field: "col",
headerSort: false

},
{
title: "Date Of Birth",
field: "dob",
sorter: "date",
align: "center",
headerSort: false

},
];
const table = new Tabulator("#example-table", {
height: 205, // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
data: tabledata1, //assign data to table
layout: "fitColumns", //fit columns to width of table (optional)
columns: col1
});
const removeArrow = function() {
table.setColumns(col2);
}

$('#removeArrow').click(function() {
removeArrow();
});

<!DOCTYPE html>
<html lang="en">

<script src="https://unpkg.com/tabulator-tables@4.2.4/dist/js/tabulator.min.js"></script>
<link href="https://unpkg.com/tabulator-tables@4.2.4/dist/css/tabulator.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
<div id="example-table"></div>

<button id="removeArrow">Change Column Definition</button>

</body>

</html>

ответил(а) 2019-05-09T19:06:00+03:00 11 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема