Может ли подсетка экспортироваться в угловую сетку

Question

Я использую сетку из http://ui-grid.info/ в проекте. Я создал иерархическую сетку, которая хорошо работает, но когда я делаю экспорт, он экспортирует только данные из сетки верхнего уровня.

Это сделано специально и является стандартным функционалом для сетки, поэтому нет смысла выкладывать пример кода. Подойдет любой пример из http://ui-grid.info/docs/.

Есть ли способ экспортировать подсетку (желательно как основную сетку, так и подсеть вместе, как они отображаются в сетке)?

Answer 1

К сожалению, ответ - нет.

Как вы можете видеть здесь функцию getData перебирает все строки, а затем все столбцы, добавляя в массив extractedFields столбцы, которые будут извлечены и объединены в массиве extractedRows,

Это означает, что никаких данных, кроме того, что определено в gridOptions' columnDef будут прочитаны, преобразованы и извлечены.

По своей структуре информация о подсетях хранится в свойстве любого объекта строки subGridOptions но это свойство никогда не доступно внутри функции экспортера.

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

Кроме того, добавление подсетки к CSV может быть довольно сложно спроектировать, если мы хотим предоставить общее решение (например, я даже не думаю, что оно будет соответствовать CSV стандартный, если у вас было разное количество столбцов в основной сетке и в подсетях).

Тем не менее, ui-grid - это проект с открытым исходным кодом, поэтому, если вы имеете в виду рабочий дизайн, не стесняйтесь открывать обсуждение этого на странице проекта gitHub или, что еще лучше, если вы можете создать рабочий (и протестировал)) решение и создать запрос на получение, даже лучше!

Answer 2

Мне удалось заставить его работать, хотя, если бы у меня было время, я бы сделал это немного лучше, чем то, что я сделал, фактически создав ветку кода и выполнив ее должным образом, но с учетом временных ограничений у меня получилось: работает хорошо.

К вашему сведению, вот как я в итоге заставил его делать то, что я хотел:

В параметрах сетки я отключил параметры экспорта CSV в меню сетки (поскольку я реализовал изменения только для PDF).

Я сделал копию файла exporter.js, назвал его custom.exporter.js и изменил ссылку на новый файл.

В custom.exporter.js я сделал копию функции getData и назвал ее getGridRows. getGridRows - это то же самое, что и getData, за исключением того, что он просто возвращает объект row без всего, что получает столбцы и так далее. Сейчас я пишу код для работы с известным набором столбцов, поэтому мне все это не нужно.

Я изменил функцию pdfExport следующим образом:

pdfExport: function (grid, rowTypes, colTypes) {
              var self = this;

              var exportData = self.getGridRows(grid, rowTypes, colTypes);

              var docContent = [];

              $(exportData).each(function () {
                  docContent.push(
                      {
                          table: {
                              headerRows: 1,
                              widths: [70, 80, 150, 180],
                              body: [
                                [{ text: 'Job Raised', bold: true, fillColor: 'lightgray' }, { text: 'Job Number', bold: true, fillColor: 'lightgray' }, { text: 'Client', bold: true, fillColor: 'lightgray' }, { text: 'Job Title', bold: true, fillColor: 'lightgray' }],
                                [formattedDateTime(this.entity.JobDate,false), this.entity.JobNumber, this.entity.Client, this.entity.JobTitle],
                              ]
                          }
                      });
                  var subGridContentBody = [];
                  subGridContentBody.push([{ text: 'Defect', bold: true, fillColor: 'lightgray' }, { text: 'Vendor', bold: true, fillColor: 'lightgray' }, { text: 'Status', bold: true, fillColor: 'lightgray' }, { text: 'Sign off', bold: true, fillColor: 'lightgray' }]);
                  $(this.entity.Defects).each(function () {
                      subGridContentBody.push([this.DefectName, this.DefectVendor, this.DefectStatus, '']);
                  });
                  docContent.push({
                      table: {
                          headerRows: 1,
                          widths: [159, 150, 50, 121],
                          body: subGridContentBody
                      }
                  });
                  docContent.push({ text: '', margin: 15 });
              });

              var docDefinition = {
                  content:  docContent
              }


              if (self.isIE()) {
                  self.downloadPDF(grid.options.exporterPdfFilename, docDefinition);
              } else {
                  pdfMake.createPdf(docDefinition).open();
              }
          }

Answer 3

Нет, прямого способа экспорта подсетки нет. скорее вы можете создать свои собственные данные JSON для создания CSV-файла. Пожалуйста, проверьте код ниже

function jsonToCsvConvertor(JSONData, reportTitle) {
    //If JSONData is not an object then JSON.parse will parse the JSON string in an Object
    var arrData = typeof JSONData !== 'object' ? JSON.parse(JSONData) : JSONData,                    
        csv = '',
        row,
        key1,
        i,
        subGridData;

    //Set Report title in first row or line                    
    csv += reportTitle + '\r\n\n';

    row = '';                        
    for (key1 in arrData[0]) {                         
        if(key1 !== 'subGridOptions' && key1 !== '$$hashKey'){
            row += key1 + ',';
        }
    }                                  
    csv += row + '\r\n';

    for (i = 0; i < arrData.length; i++) {
        row = '';
        subGridData = '';                                        
        for (key1 in arrData[i]) {
            if(key1 !== 'subGridOptions' && key1 !== '$$hashKey'){
                row += '"' + arrData[i][key1] + '",';
            }
            else if(key1 === 'subGridOptions'){
                //csv += row + '\r\n';
                subGridData = writeSubGridData(arrData[i][key1].data);                                
            }                     
        }
        csv += row + '\r\n';
        csv = subGridData ? csv + subGridData + '\r\n' : csv;
    }
    if (csv === '') {
        console.log('Invalid data');
    }
    return csv;     
}
//Generates subgrid Data to exportable form
function writeSubGridData(subgridData){
    var j,
        key2,             
        csv = '',
        row = '';
    for (key2 in subgridData[0]){
        if(key2 !== '$$hashKey'){
        row += key2 + ',';  
        }                                
    }
    csv = row + '\r\n';
    for (j=0; j < subgridData.length ; j++){
        row = '';                                    
        for(key2 in subgridData[j]){
            if(key2 !== '$$hashKey'){                                
                row += '"' + subgridData[j][key2]+ '",';
            }
        }
        csv += row + '\r\n';
    }
    return csv;
}

jsonToCsvConvertor(exportData, 'New-Report');