Перейти из форума на сайт.


Система IP-видеонаблюдения "Линия". Скачать бесплатную демо-версию для 16 камер. НовостиФайловые архивы
ПоискАктивные темыТоп лист
ПравилаКто в on-line?
Вход Забыли пароль? Первый раз на этом сайте? Регистрация
Компьютерный форум Ru.Board » Интернет » Web-программирование » Работа с базой на 50 тысяч строк

Модерирует : Cheery

 Версия для печати • ПодписатьсяДобавить в закладки

Открыть новую тему     Написать ответ в эту тему

D1D1D1D

Full Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Привет!  
Есть 50 тысяч изображений — экслибрисов, готовящихся для раздачи на трекере, для удобства пользования по различным частям имен которых надо обеспечить поиск, поскольку в них будет содержаться до восьми категорий. То есть, чтобы после их скачивания желающими — пользователь мог проводить по ним поиск через файл из той же папки, полностью локально.  
 
Предполагается использование html-файла и js, возможности которых, судя по некоторым примерам, более чем приемлимы. Судя по всему, потребуется база со списком, из которой по запросу в html будут подгружаться соответствия поиску, в котором есть необходимость в нескольких поисковых строках, для поиска в определенных частях имён изображений, напр. —  
 
Автор изображения | Название | Страна | Год создания.  
 
Идеальным был бы следующий вариант — https://community.algolia.com/demo-infinite-scroll/ только он "демонстративный" и его нельзя сделать локальным. Может у кого-то есть на примете такие же настраиваемые варианты?
 
Подошел бы следующий пример на несколько мегабайт, с возможностью поиска по нескольким параметрам: http://dabblet.com/gist/1528281 (или http://search.archimeta.ru/) — если б только список в нём не размещался в самом файле, и если бы выводимые результаты из базы можно было ограничивать пагинацией.
 
Также был найден другой подходящий пример, типа сортируемых таблиц — скрипт "Filtering.zip" (https://yadi.sk/d/B1XZleWb3Ma6xU), фильтрующий данные из колонок, который базу на 50 тысяч строк в 6 колонок открывает и сортирует довольно быстро, поддерживает пагинацию, гибкий поиск и который можно использовать локально. Здесь онлайн-пример: https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/Filtering/Knockout/Light/  
На сайте разработчиков существует множество его вариантов, только вот в этой версии нет возможности вставки изображений, которые без настройки выводятся как HTML-код, хотя в других версиях скрипта с того же сайта (например в этой: https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/Column3RdPartyEngineTemplate/jQuery/Light/) изображения поддерживаются. Мне подсказывали, что надо отредактировать файл 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);
                }
            },
            ...
        ]
    });
     
});
 

Всего записей: 542 | Зарегистр. 05-04-2010 | Отправлено: 02:48 04-09-2017 | Исправлено: D1D1D1D, 03:48 04-09-2017
Mavrikii

Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
D1D1D1D

Цитата:
 чего сделать без знаний js у меня так и не вышло:

сложность то в чем?

Код:
        columns: [{
            dataField: "Pic",  
            width: 100,  
            allowFiltering: false,  
            allowSorting: false,  
            cellTemplate: function (container, options) {  
                    $("<div>", { "class": "img-container" })  
                        .append($("<img>", { "src": options.value }))  
                        .appendTo(container);  
                }  
        },
{
            dataField: "OrderNumber",
            width: 130,
            caption: "Invoice Number",
            headerFilter: {
                groupInterval: 10000
            }
        }, {
            dataField: "OrderDate",
            alignment: "right",
            dataType: "date",

 
в data.js в записи (в каждую) добавляете поле Pic:

Код:
var orders = [{
    "ID": 1,
   "Pic": "https://a.deviantart.net/avatars/m/e/mellowshark.gif",
    "OrderNumber": 35703,
    "OrderDate": "2014/04/10",
    "SaleAmount": 11800,
    "Terms": "15 Days",
    "CustomerStoreState": "California",
    "CustomerStoreCity": "Los Angeles",
    "Employee": "Harv Mudd"
}, {
    "ID": 4,

и все

Всего записей: 4953 | Зарегистр. 20-09-2014 | Отправлено: 07:33 04-09-2017
D1D1D1D

Full Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Спасибо!

Всего записей: 542 | Зарегистр. 05-04-2010 | Отправлено: 20:46 04-09-2017
D1D1D1D

Full Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
По ходу дела возник вопрос по программистской части и заодно — по визуальной. Обсуждавшийся выше скрипт приобрел следующий вид и в отношении функционала хочется спросить, есть ли возможность разбивать содержимое колонки "Ключевые слова" на составляющие и сортировать по отдельности? То есть, чтобы слова Bird|Literature|Sun со скриншота, фильтр разбивал в местах символа "|", и группировал с подобными словами — и при этом чтобы при поиске файл с ключевыми словами "Bird|Literature|Sun" выводился по каждому из этих слов? —
 

 
А по визуальной части интересует, дано ли переместить видимое на скрине справа вверху поисковое окно в боковую, вторую сверху, ячейку слева и полностью убрать отступы для изображений? А то там они взаимосвязаны — если убрать отступы у изображений, они убираются и для текста.

Всего записей: 542 | Зарегистр. 05-04-2010 | Отправлено: 22:24 07-09-2017 | Исправлено: D1D1D1D, 22:28 07-09-2017
Mavrikii

Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Цитата:
если убрать отступы у изображений, они убираются и для текста.

к примеру так

Код:
.img-container {
 margin: -6px;
}

 

Цитата:
"Bird|Literature|Sun" выводился по каждому из этих слов?

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

Всего записей: 4953 | Зарегистр. 20-09-2014 | Отправлено: 23:17 07-09-2017
D1D1D1D

Full Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Ясно, спасибо. А поиск перенести есть способ?

Всего записей: 542 | Зарегистр. 05-04-2010 | Отправлено: 23:24 07-09-2017
Mavrikii

Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
D1D1D1D

Цитата:
А поиск перенести есть способ?

родного видимо нет, нужно кромсать/дополнять скрипт.
 
списком можно манипулировать вот так, к примеру (не уберет дубли)

Код:
        headerFilter: {
            dataSource: function(data) {
                data.dataSource.postProcess = function(results) {
                    var newResults = [];
                    $.map(results, function(el) {
                       var tmp = el.value.split('|');
                       for (var i = 0; i < tmp.length; i++)
                          newResults.push({
                             text: tmp[i],
                             value: tmp[i]
                          });
                    });
                    return newResults;
                };
            }
        }

но вот фактическую фильтрацию тоже придется переделывать
 
Добавлено:
Можно вот так

Код:
      {
        width: '10%',
        dataField: 'word',
        selectedFilterOperation: 'contains',
        caption: 'Ключевые слова',
        headerFilter: {
            dataSource: function(data) {
                data.dataSource.postProcess = function(results) {
                    var newResults = [], used = [];
                    $.map(results, function(el) {
                       var tmp = el.value.split('|');
                       for (var i = 0; i < tmp.length; i++)
                          if (used.indexOf(tmp[i]) === -1) {
                            used.push(tmp[i]);
                            newResults.push({
                               text: tmp[i],
                               value: el.value
                            });
                          }
                    });
                    return newResults;
                };
            }
        }
      },

тогда строка поиска находит (если вручную набивать), и чекбоксы не повторяются, но фильтрация по чекбоксам через contains не срабатывает
 
ps: исправил, теперь работает
 
правда при повторном нажатии на фильтр отмечены все опции, надо дальше копать - самостоятельно уж )

Всего записей: 4953 | Зарегистр. 20-09-2014 | Отправлено: 23:34 07-09-2017 | Исправлено: Mavrikii, 00:19 08-09-2017
D1D1D1D

Full Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
Спасибо, это как раз подходит, потому что, действительно, искать можно через общий поиск, а через этот фильтр получать представление о доступных ключевых словах. И в таком случае, получится ли заблокировать чекбоксы или кнопку окей именно для этого окна?
 
Добавлено:
Mavrikii
 
Благодарю, отлично вышло!

Всего записей: 542 | Зарегистр. 05-04-2010 | Отправлено: 00:25 08-09-2017
Mavrikii

Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
D1D1D1D

Цитата:
И в таком случае, получится ли заблокировать чекбоксы или кнопку окей именно для этого окна?

если такими вещами занимаетесь, у вас нет нормального вебмастера ?)  
это уже сложнее, так как всплывающее окошко не привязано напрямую именно к этой колонке (хоть и ссылается, то через css это не дает возможности написать для него стиль в этом случае)
по умолчанию такой возможности нет, как и не видно события выбрасываемого в момент отображения окошка фильтрации
https://js.devexpress.com/Documentation/ApiReference/UI_Widgets/dxDataGrid/Configuration/headerFilter/

Всего записей: 4953 | Зарегистр. 20-09-2014 | Отправлено: 00:42 08-09-2017
D1D1D1D

Full Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
Нормального вебмастера нет, потому что я сам себе вебмастер)) Кстати по предыдущему фрагменту кода оказалось, что при выборе одного ключевого слова из группы, происходит выбор сразу всех слов и поэтому отдельные слова в выборку не попадают. То есть, если выбрать слово Sun по чекбоксу, результат выдаст только Sun из групп, а множество отдельных Sun не покажет. В связи с этим у меня вопрос, может получится по клику на значок фильтра показывать уже вписанный в код  готовый список слов, по выбору одного из которых вставлять его в окно поиска?

Всего записей: 542 | Зарегистр. 05-04-2010 | Отправлено: 01:06 08-09-2017
Mavrikii

Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
D1D1D1D

Цитата:
а множество отдельных Sun не покажет.


Цитата:
value: el.value

из за этого. по этой же причине, если поменять порядок, ключевых в строке, тоже, скорее всего, не будет находить. оно ищет только по полному совпадению, а не для contains (который срабатывает только для поиска)
там не хватает методов для написания своей фильтрации (а может и не вижу их)
 
тут наброски есть какие то - https://www.devexpress.com/Support/Center/Question/Details/T320506/dxdatagrid-how-to-create-a-custom-header-filter-popup

Всего записей: 4953 | Зарегистр. 20-09-2014 | Отправлено: 01:24 08-09-2017 | Исправлено: Mavrikii, 01:28 08-09-2017
D1D1D1D

Full Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
По дизайну вот что получилось — общий поиск перенес вниз и зафиксировал, также зафиксирована заголовочная часть таблицы:
 

 
И вот интересует в отношении выделенного — можно ли перечеркнутую часть (две ячейки) сделать прозрачной? Или, присвоив стиль именно для этих ячеек, принять какие-то другие меры? Или может слой изображения по вертикали пустить поверх — у меня не получилось.
 
Также хотелось бы исправить поведение, когда при переходе на другую страницу с середины страницы — на следующей тоже оказываешься в середине, а не в верху. Может есть способ при нажатии на ссылки пагинации — заодно отправлять в #onTop по якорю?

Всего записей: 542 | Зарегистр. 05-04-2010 | Отправлено: 02:12 09-09-2017
Открыть новую тему     Написать ответ в эту тему

Компьютерный форум Ru.Board » Интернет » Web-программирование » Работа с базой на 50 тысяч строк

Имя:
Пароль:
Сообщение

Для вставки имени, кликните на нем.

Опции сообщенияДобавить свою подпись
Подписаться на получение ответов по e-mail
Добавить тему в личные закладки
Разрешить смайлики?
Запретить коды


Реклама на форуме Ru.Board.

Powered by Ikonboard "v2.1.7b" © 2000 Ikonboard.com
Modified by Ru.Board
© Ru.Board 2000-2017

BitCoin: 1NGG1chHtUvrtEqjeerQCKDMUi6S6CG4iC

Рейтинг.ru