Buenas noches amigos, estoy tratando de representar un documento de Excel relativamente simple como parte de una cuadrícula utilizando la versión simple de JavaScript de la comunidad AG Grid. Tengo un par de funciones para obtener la fila del encabezado y los datos, como se muestra a continuación:

 def get_excel_data_headers(): path = Path("/Users/excel_doc.xlsx") df = pd.read_excel(path, header=0) return df.columns def get_excel_data(): path = Path("/Users/excel_doc.xlsx") df = pd.read_excel(path, header=0) cell = [] for rowIndex, row in df.iterrows(): #iterate over rows for columnIndex, value in row.items(): #print(value, end="\t") cell.append(value) return cell

y mis vistas.py

 class excel(ListView):#The project detailed view of all submitted info model = Project template_name = "home/grid_upload.html" def get_context_data(self, **kwargs): context = super().get_context_data(**kwargs) context['headers'] = get_excel_data_headers() context['row_data'] = get_excel_data() return context

Sin embargo, no estoy seguro de cómo representar esto en la plantilla. Puedo hacer que la fila del encabezado funcione, sin embargo, no sé cuál es el mejor enfoque para agregar los datos, ya que el argumento requiere que se especifique la fila del encabezado para cada elemento de datos de la fila, pero esto se establece como parte de un bucle for diferente, a continuación se muestra mi código de plantilla actual, sin embargo, se procesa correctamente y estoy perdido en la dirección para implementar esto correctamente,

 <script type="text/javascript" charset="utf-8"> // specify the columns const columnDefs = [{% for head in headers %} { field: "{{head}}", sortable: true, filter: true }, {% endfor %} ]; // specify the data const rowData = [ {% for data in row_data %} { {{headers}}: "{{row_data}}", {{headers}}: "{{data}}", {{headers}}: {{data}}}, {% endfor %} ]; // let the grid know which columns and what data to use const gridOptions = { columnDefs: columnDefs, rowData: rowData }; function onRowDataA() { gridOptions.api.setRowData(rowDataA); } // lookup the container we want the Grid to use const eGridDiv = document.querySelector('#myGrid'); // create the grid passing in the div to use together with the columns & data we want to use new agGrid.Grid(eGridDiv, gridOptions); </script>

Cualquier ayuda con esto es muy apreciada