Можно ли экспортировать подсетку в angular ui-grid

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

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

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


person Matt Eno    schedule 17.11.2015    source источник
comment
Вы пробовали таблицы данных. datatables.net Он основан на jquery, и у вас есть множество расширений в jq, которые делают это. Более того, таблицы данных очень отзывчивы. ng UI-Grid излишне усложнили свою библиотеку.   -  person Gary    schedule 10.12.2015


Ответы (3)


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

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

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

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

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

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

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

person imbalind    schedule 09.12.2015
comment
Чтобы экспортируемый файл соответствовал стандарту csv, возможно, каждая сетка занимает отдельный csv. Ячейка основной сетки, состоящая из вложенных сеток, включает ссылку на внешний CSV-файл вложенной сетки... небольшая мысль, которой хочется поделиться. - person gm2008; 14.12.2015
comment
Как вы думаете, какие могут быть ссылки? Я искренне не могу придумать стандартный способ сделать это - person imbalind; 15.12.2015

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

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

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

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

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

Я изменил функцию 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();
              }
          }
person Matt Eno    schedule 31.12.2015
comment
Спасибо, что поделились этим, он оказался чрезвычайно полезным при попытке реализовать мой собственный экспорт подсетки ui-grid. - person Elijah Lofgren; 09.09.2016
comment
Одна вещь, которую можно было бы улучшить в приведенном выше коде, — это использование вложенных таблиц, чтобы заголовок родительской таблицы не нужно было повторять. Не было очевидно, что у pdfmake есть эти функции, поэтому я разместил информацию об этом здесь: stackoverflow.com/questions/39454842/ - person Elijah Lofgren; 12.09.2016

Нет, прямого способа экспорта подсетки нет. скорее вы можете создать свои собственные данные 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');
person Richa Mishra    schedule 14.05.2018