Работа с базой на 50 тысяч строк

233

05 сентября 2017, 10:15

Привет! Есть 50 тысяч изображений — экслибрисов, готовящихся для раздачи на трекере, для удобства пользования по различным частям имен которых надо обеспечить поиск, поскольку в них будет содержаться до восьми категорий. То есть, чтобы после их скачивания желающими — пользователь мог проводить по ним поиск через файл из той же папки, полностью локально.

Предполагается использование html-файла и js, возможности которых, судя по некоторым примерам, более чем приемлимы. Судя по всему, потребуется база со списком, из которой по запросу в html будут подгружаться соответствия поиску, в котором есть необходимость в нескольких поисковых строках, для поиска в определенных частях имён изображений, напр.

Автор изображения | Название | Страна | Год создания

Идеальным был бы этот вариант:

https://community.algolia.com/demo-infinite-scroll/

Только он "демонстративный" и его нельзя сделать локальным. Может у кого-то есть на примете такие же настраиваемые варианты?

Подошел бы следующий пример на несколько мегабайт, с возможностью поиска по нескольким параметрам:

http://dabblet.com/gist/1528281 (или http://search.archimeta.ru/)

Если б только список в нём не размещался в самом файле, и если бы выводимые результаты из базы можно было ограничивать пагинацией.

Также был найден другой подходящий пример, типа сортируемых таблиц — скрипт:

https://yadi.sk/d/B1XZleWb3Ma6xU (Filtering.zip)

Фильтрующий данные из колонок, который базу на 50 тысяч строк в 6 колонок открывает и сортирует довольно быстро, поддерживает пагинацию, гибкий поиск и который можно использовать локально.

Онлайн-пример

На сайте разработчиков существует множество его вариантов, только вот в этой версии нет возможности вставки изображений, которые без настройки выводятся как HTML-код, хотя в других версиях скрипта с того же сайта, — например, ЗДЕСЬ — изображения поддерживаются. Мне подсказывали, что надо отредактировать файл index.js из архива, приведя следующий код, чего сделать без знаний js у меня так и не вышло:

$(function(){
    $("#gridContainer").dxDataGrid({
        dataSource: employees,
        columns: [{
                dataField: "Picture",
                width: 100,
                allowFiltering: false,
                allowSorting: false,
                [B]cellTemplate: function (container, options) {
                    $("<div>", { "class": "img-container" })
                        .append($("<img>", { "src": options.value }))
                        .appendTo(container);
                }
            },
            ...
        ]
    });
});

Answer 1

Ну, если рассматривать вариант с jQuery, я бы начал с этого (сохранил что у меня получилось ТУТ)

index.js

$(function(){
  $('#gridContainer').dxDataGrid({
    dataSource: photos,
    filterRow: {
      visible: true,
      applyFilter: "auto"
    },
    columns: [
      {
        dataField: 'img',
        caption: 'Фото',
        width: 100,
        allowFiltering: false,
        allowSorting: false,
        cellTemplate: function (container, options) {
          $('<div>', { class: 'img-container' })
            .append($('<img>', { class: 'img-container_item', src: options.value }))
            .appendTo(container);
        }
      },
      {
        dataField: 'author',
        caption: 'Автор изображения'
      },
      {
        dataField: 'name',
        caption: 'Название'
      },
      {
        dataField: 'country',
        caption: 'Страна'
      },
      {
        dataField: 'year',
        caption: 'Год создания'
      }
    ]
  });
});

data.js (просто пример в каком формате скармливать данные)

var photos = [
  {
    img: 'http://i2.cdn.cnn.com/cnnnext/dam/assets/160825160953-05-week-in-photos-0826-super-169.jpg',
    author: 'Фотограф 1',
    name: 'Панда 1',
    country: 'Индонезия 1',
    year: 2010
  },
  {
    img: 'http://i2.cdn.cnn.com/cnnnext/dam/assets/160825160953-05-week-in-photos-0826-super-169.jpg',
    author: 'Фотограф 2',
    name: 'Панда 2',
    country: 'Индонезия 2',
    year: 2011
  },
  {
    img: 'http://i2.cdn.cnn.com/cnnnext/dam/assets/160825160953-05-week-in-photos-0826-super-169.jpg',
    author: 'Фотограф 3',
    name: 'Панда 3',
    country: 'Индонезия 3',
    year: 2012
  },
  {
    img: 'http://i2.cdn.cnn.com/cnnnext/dam/assets/160825160953-05-week-in-photos-0826-super-169.jpg',
    author: 'Фотограф 4',
    name: 'Панда 4',
    country: 'Индонезия 4',
    year: 2013
  },
  {
    img: 'http://i2.cdn.cnn.com/cnnnext/dam/assets/160825160953-05-week-in-photos-0826-super-169.jpg',
    author: 'Фотограф 5',
    name: 'Панда 5',
    country: 'Индонезия 5',
    year: 2014
  }
];

Этот массив передается в dataSource (index.js)

Так же требуется создать styles.css (он уже подключается в htm, но его почему-то нет). Ну не то что бы прям "требуется", но таблицу причесать надо (я туда просто вписал стили для картинки)

Дальше уже по ситуации ... В целом ничего сложного, но мне кажется это уже не совсем задача для stackoverflow.