Дайте Layui-table душу

Текущая версия Layui — v2.9.13.

Онлайн-демонстрация и документация: https://yelog.org/layui-soul-table.

Национальное зеркало: https://gitee.com/saodiyang/layui-soul-table.

Расширенные функции:

1. Фильтрация заголовков, пользовательские условия (для ознакомления с фильтрацией на стороне клиента и на стороне сервера см. раздел «Три, фильтрация на стороне сервера»).
2. Перемещение столбцов для изменения порядка и скрытие отображения столбцов.
3. Экспорт в Excel (в соответствии с условиями фильтрации и порядком столбцов).
4. Подтаблицы (подтаблицы, таблицы без ограничений по уровню вложенности, подтаблицы также поддерживают первые три функции).
5. Перетаскивание строк.
6. Контекстное меню быстрого доступа.
7. Поддержка фиксированных столбцов в итоговой строке.
8. Адаптация ширины столбца при двойном щелчке.
9. Фиксированные столбцы справа, перетаскивание ширины столбцов влево к ячейкам.

Эффект:

• Эффект фильтрации заголовков:
  • gif-файл с эффектом фильтрации заголовков.
• Эффект редактирования условий фильтрации:
  • gif-файл с примером фильтрации стихов династии Тан или династии Мин по фамилии автора.
• Перемещение и скрытие столбцов:
  • gif-файл, демонстрирующий перемещение столбцов и скрытие их после отпускания мыши за пределами таблицы.
• Подтаблицы:
  • gif-файл с подтаблицами.

Быстрое начало работы:

1. Поместите следующие модули в свой проект:
   • soulTable.js — общий вход;
   • tableFilter.js — фильтрация заголовков;
   • excel.js — экспорт в Excel;
   • tableChild.js — подтаблицы (можно использовать отдельно);
   • tableMerge.js — объединение ячеек (можно использовать отдельно).

Расположение исходного кода: ext. Расположение сжатой версии: docs/ext.

2. Определите модуль входа soulTable:

// Пользовательский модуль, здесь достаточно открыть soulTable
layui.config({
    base: 'ext/', // каталог модуля
}).extend({ // расширение
    soulTable: 'soulTable' // псевдоним модуля
});

3. Включите soulTable.css в свой проект (находится в корне проекта).

4. Используйте в table.render():

   • В done добавьте soulTable.render(this).
   • Добавьте filter: true в столбцы, которые требуют раскрывающегося списка фильтров.

table.render({
    elem: '#myTable',
    height: $(document).height() - $('#myTable').offset().top - 20,
    limit: 20,
    page: true,
    cols: [[
        {type: 'checkbox', fixed: 'left'},
        {field:'poetry', title:'诗词', width:188, filter:true, sort: true},
        {field:'name',  title:'诗人', width:100, filter:true, sort: true},
        {field:'type', title:'类型', width:100, filter:true},
        {field:'dynasty', title:'朝代',  width:150, filter:true},
        {field:'sentences', title:'名句', width:400, filter:true},
        {title:'操作', toolbar: '#barDemo', width:150}
    ]],
    done: function () {
        soulTable.render(this)
    }
});

Подробное описание:

• Поддержка нескольких сценариев использования:

  • Демоверсия содержит примеры всех сценариев.
  1. Без постраничной разбивки на клиенте: page: false.
  2. С постраничной разбивкой на клиенте: page: true.
  3. С постраничной разбивкой на сервере: url — не пустой, page: true.

  Поскольку первые два сценария используют фильтрацию на стороне клиента, их можно использовать напрямую. Однако в третьем сценарии данные на стороне клиента неполные, поэтому требуется поддержка на стороне сервера. Для Java-приложений, использующих MyBatis в качестве слоя персистентности, уже есть перехватчик MyBatis, который поддерживает MySQL и Oracle. Если вы используете Java и MyBatis как уровень персистентности, вы можете интегрировать его, перейдя по ссылке: https://github.com/yelog/layui-soul-table-java. Для других языков или фреймворков, если у вас нет потребности, вы можете расширить функциональность (если у вас есть вопросы, пожалуйста, свяжитесь со мной).

• Фильтрация:

  Параметр	Тип	Описание
  filter	boolean	true			Значение по умолчанию: false
  	object	type	date[yyyy-mm-dd hh:mm:ss]	В настоящее время реализована оптимизация для типов даты (можно фильтровать по вчерашнему дню, текущей неделе, текущему месяцу и т. д.), формат должен быть настроен в соответствии с фактическим форматом данных. Другие типы имеют хорошие идеи для расширения.

  1. Оптимизация типа даты, filter: {type: 'date[yyyy-MM-dd HH:mm:ss]'}.

  var myTable = table.render({
      ...
      ,cols: [
          ...
          ,{field: 'createTime', title: 'Время регистрации', width: 165, filter: {type: 'date[yyyy-MM-dd HH:mm:ss]'}, sort:true}
          ... 
      ]
      ,done: function () {
          soulTable.render(this)
      }
  });
  2. Настройка порядка выпадающего меню и отображения (удаление определённых элементов массива скрывает их). Этот параметр фильтра не является обязательным, и значение по умолчанию выглядит следующим образом:

  var myTable = table.render({
      ... 
      cols: [
         ... 
      ],
      filter: {
          // Используется для управления отображением выпадающего списка заголовков, можно управлять порядком и отображением, порядок: таблица столбцов, данные фильтрации, условия фильтрации, редактирование условий фильтрации, экспорт в Excel
          items:['column','data','condition','editCondition','excel'] 
      },
      done: function (res, curr, count) {
          soulTable.render(this)
      }
  });
  3. Скрыть область фильтрации внизу, значение по умолчанию — true (отображение).

  var myTable = table.render({
      ... 
      cols: [
         ... 
      ],
      filter: {
          bottom: false
      },
      done: function (res, curr, count) {
          soulTable.render(this)
      }
  });

• Экспорт в Excel: В настоящее время поддерживается только для Java с использованием MyBatis. Если вы соответствуете вышеуказанным условиям, вы можете перейти к полному проекту, включающему серверную часть, то есть: https://github.com/yelog/layui-soul-table-java. {field: 'title', title: '诗词', width: 200, sort: true, filter: true}, {field: 'dynasty', title: '朝代', width: 100, sort: true, filter: true}, {field: 'author', title: '作者', width: 165 , filter: true}, {field: 'type', title: '类型', width: 112, filter: {split:','}, sort:true}, {field: 'content', title: '内容', width: 823, filter: true}, {field: 'heat', title: '点赞数', width: 112, filter: true, sort:true}, {field: 'createTime', title: '录入时间', width: 165, filter: {type: 'date[yyyy-MM-dd HH:mm:ss]'}, sort:true}, {title: '操作', width: 156, templet: '#bar'} ]] ,done: function () { soulTable.render(this) } });

下面为默认配置，如果不改，可直接去掉excel参数

var myTable = table.render({
...
, cols: [[
...
]]
, excel:{ // 导出excel配置, （以下值均为默认值）
on: true, //是否启用, 默认开启
filename: '诗词.xlsx', // 文件名
head:{ // 表头样式
family: 'Calibri', // 字体
size: 12, // 字号
color: '000000', // 字体颜色
bgColor: 'C7C7C7' // 背景颜色
},
font: { // 正文样式
family: 'Calibri', // 字体
size: 12, //
``` ## Размер шрифта
    
            color: '000000', // Цвет шрифта
            bgColor: 'FFFFFF' //Цвет фона
        }
    }
    , done: function (res, curr, count) {
        soulTable.render(this)
    }
});
## Встроенные методы
### 1. Метод рендеринга render()

`soulTable.render(this)` используется в table.render() внутри метода done. Если необходимо использовать какие-либо функции этого плагина, эта строка обязательна.

### 2. Экспорт в Excel export()
Помимо активации выпадающего списка «экспорт в excel», вы также можете вызвать метод для экспорта самостоятельно.
```html
<a class="layui-btn" id="export">Экспорт</a>
<script>
    layui.use(['form', 'soulTable', 'table'], function () {
        ...
        var myTable = table.render({
            ... 
            , done: function (res, curr, count) {
                soulTable.render(this)
            }
        });
        
        $('#export').on('click', function() {
            soulTable.export(myTable);
        })
    })
</script>

Зависимые проекты

Заключение

Конечно, вы можете клонировать код и посмотреть его. Если у вас есть вопросы, вы можете задать их в разделе issue, и я постараюсь ответить как можно скорее.