主页 / 问题 / 714025
Accepted
iskander1220
Asked:2020-09-04 07:57:42 +0800 CST2020-09-04 07:57:42 +0800 CST

使用 50,000 行的数据库

  • 772

你好！有 50,000 张图像 - 书签，正在准备在跟踪器上分发，为了便于使用，有必要提供搜索其名称的各个部分，因为它们将包含多达八个类别。也就是说，在那些希望的人下载它们之后，用户可以完全在本地通过同一文件夹中的文件搜索它们。

应该使用 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)

分列过滤数据，快速打开6列5万行的数据库并排序，支持分页，灵活搜索，可本地使用。

在线示例

在开发者的网站上有很多变种，只有在这个版本中，不可能插入未经定制就输出为 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);
                }
            },
            ...
        ]
    });

});
javascript

1 个回答

  1. Best Answer

    好吧，如果我们考虑 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.

    • 0

相关问题