Табулятор - HeaderSorting - PullRequest
Новая
       10

Табулятор - HeaderSorting

1 голос
/ 09 мая 2019

Я делаю много необработанных 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",
});

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

Ответы [ 3 ]

1 голос
/ 13 мая 2019 
<th tabulator-headersort="false" >@ColumnName</th>

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

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

0 голосов
/ 10 мая 2019

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

Только что добавил это в мои тэги: 

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

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

Использование версии 4.2 fyi

0 голосов
/ 09 мая 2019

Вы должны указывать 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>
...