ninjaef Ответов: 0

Как прочитать файл excel и создать таблицу поиска JS/HTML/CSS

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

Anyway, the scenario is that we have Staff Training Completion data hosted on a webserver as an XLSX file. The file contains 1,077,200 rows and is a dump of Training courses completed by every individual across the company, across the world. The XLSX file contains a header row and the columns are: EMPLOYEE(numeric[10]), COURSE_ID(alphanumeric[20]), TITLE(alphanumeric[100]), DATE(date[dd-mmm-yy]). We have no control over this file , cannot change it or the format , and can only read it. There are no unique fields and each employee can have 0..n rows of assocaited training data. We need to read this XLSX into a lookup table. So we are of the view that we need to read this XLSX file into a two-dimension lookup table, EMPLOYEE ID by COURSE ID so a 1..n relationship.

Далее, у нас есть список учебных курсов, также размещенных на веб-сервере, в виде файла XLSX; это просто два столбца, столбец 1-идентификатор курса [такой же, как появляется в завершении обучения], а столбец 2 - название курса, которое является локальным переименованным названием [отличается от завершения обучения]. Таким образом, мы не используем название курса, появляющееся в файле завершения обучения. Опять же, мы считаем, что нам нужно прочитать этот файл XLSX в двухмерную таблицу поиска, COURSE_ID по COURSE_TITLE, но это отношение 1..1.

Таким образом, у нас есть 2 таблицы поиска:
Table 1: Employee ID is unique key
EMPLOYEE_ID   {COURSE_ID, COMPLETION_DATE}, {COURSE_ID, COMPLETION_DATE} , ...
EMPLOYEE_ID   {COURSE_ID, COMPLETION_DATE}, {COURSE_ID, COMPLETION_DATE} , ...
EMPLOYEE_ID   {COURSE_ID, COMPLETION_DATE}, {COURSE_ID, COMPLETION_DATE} , ...

Table 2: Course ID is unique key
COURSE_ID   {COURSE TITLE}, {COURSE TITLE}, , ...
COURSE_ID   {COURSE TITLE}, {COURSE TITLE}, , ...
COURSE_ID   {COURSE TITLE}, {COURSE TITLE}, , ...

В SharePoint мы хотим разместить обучающую матрицу в веб-части html-контента [html/css/javascript]. Матрица будет отображать для вошедшего в систему пользователя и всех прямых отчетов завершенные учебные курсы. Пользователи идентифицируются по номеру своего сотрудника, который совпадает с номером, указанным в размещенном файле xlsx завершения обучения персонала. Мы хотим отобразить эту матрицу в виде таблицы с именем сотрудника [которое мы получаем из SharePoint] слева, а поперек-каждое возможное название учебного курса [таблица поиска 2], и каждое пересечение(ячейка) содержит дату завершения [из таблицы поиска 1] или пусто, если оно не завершено:-

          {Fire Handling}     {Manual Handling}  {Code of Conduct}   ...
Anne      10/11/2018          10/01/2018       
Fred      04/01/2018          10/01/2019         10/11/2018
Jo        11/12/2018                             10/11/2018
...

Существует около 10 000 сотрудников, но самое большее только около 20 будут отображаться на матрице, если у пользователя есть 20 прямых отчетов, и как минимум 1 - пользователь, вошедший в SharePoint, если у него нет никаких прямых отчетов. И не забывайте, что список пройденных тренингов может составлять более 1 миллиона строк !!

Вот как мы читаем XLSX-файлы [хотя на самом деле мы не знаем, в какую сторону идти после fileReader.readAsArrayBuffer(file);

function handleFile(e) {
  var files = e.target.files,file;
  if (!files || files.length == 0) return;
  file = files[0];
  var fileReader = new FileReader();
  fileReader.onload = function (e) {
    var filename = file.name;
    // pre-process data
    var binary = "";
    var bytes = new Uint8Array(e.target.result);
    var length = bytes.byteLength;
    for (var i = 0; i < length; i++) {
      binary += String.fromCharCode(bytes[i]);
    }
    // call 'xlsx' to read the file
    var oFile = XLSX.read(binary, {type: 'binary', cellDates:true, cellStyles:true});
  };
  fileReader.readAsArrayBuffer(file);
};


Мы знаем, как заставить данные SharePoint работать. Мы прекрасно справляемся с html и css для вывода матрицы. Мы знаем, как читать XLSX-файлы с помощью одной из js-библиотек, таких как xls/xlsx или js-xls, чего мы не знаем, так это как смоделировать две таблицы поиска или действительно ли есть лучший способ. Мы на самом деле не программисты JavaScript, но быстро учимся. К сожалению , из-за многих проблем мы не можем использовать другие языки,кроме js, css и html. Поэтому решение должно опираться на эти три фактора.

С чего же мы начнем?

Спасибо. Надеюсь, этот тизер разогреет серое вещество :)

Спасибо, что приняли участие.

Что я уже пробовал:

Не знаете, с чего начать? Так много вариантов.

0 Ответов