HTML 表格未填充

问题描述 投票：0回答：1

我已经使用 Google 脚本创建了一个网络应用程序。它目前按我想要的方式工作，没有例外。在网络应用程序上，我尝试创建一个表格，其中填充来自谷歌工作表的数据，并在需要时编辑/更新行。当我运行控制台记录器时，它显示收到的数据：null。在过去的三四天里，我一直在尝试找出我没有做什么，但似乎无法让它填充。

下面是我的index.html。

function doGet() {
  return HtmlService.createHtmlOutputFromFile('Index');
}
function getRecords() {
  try {
    var sheet = SpreadsheetApp.openById('16b_cRhhtLSqZqGqZ3bwigHleOLNYQGhGB0FGkc8j7nk').getSheetByName('Data'); // Change 'Jobs' to your actual sheet name

    if (!sheet) {
      Logger.log('Sheet not found');
      return [];
    }

    var dataRange = sheet.getDataRange();
    var values = dataRange.getValues();

    // Log the entire values array
    Logger.log('Values:', values);

    // Check if there are headers in the first row
    if (values.length < 1) {
      Logger.log('No headers found.');
      return [];
    }

    // Extract headers from the first row
    var headers = values[0];
    
    // Log the headers array
    Logger.log('Headers:', headers);

    // Convert 2D array to a 1D array of objects (assuming the first row contains headers)
    var records = [];
    for (var i = 1; i < values.length; i++) {
      var record = {};
      for (var j = 0; j < headers.length; j++) {
        // Check if the value is present before assigning to the record
        record[headers[j]] = values[i][j] !== undefined ? values[i][j] : null;
      }
      records.push(record);
    }

    if (records.length > 0) {
      Logger.log('Retrieved records:', records);
    } else {
      Logger.log('No records found.');
    }
    return records;
  } catch (error) {
    Logger.log('Error in getRecords:', error.message); // Log the error message
    return [];
  }
}




function addRecord(data) {
  var sheet = SpreadsheetApp.openById('16b_cRhhtLSqZqGqZ3bwigHleOLNYQGhGB0FGkc8j7nk').getSheetByName('Data');
  sheet.appendRow(data);
}

function updateRecord(row, data) {
  var sheet = SpreadsheetApp.openById('16b_cRhhtLSqZqGqZ3bwigHleOLNYQGhGB0FGkc8j7nk').getSheetByName('Data');
  var rowIndex = row + 2; // Adjusted row index for header
  sheet.getRange(rowIndex, 1, 1, 13).setValues([data]);
}

function deleteRecord(row) {
  var sheet = SpreadsheetApp.openById('16b_cRhhtLSqZqGqZ3bwigHleOLNYQGhGB0FGkc8j7nk').getSheetByName('Data');
  sheet.deleteRow(row + 2); // Adjusted row index for header
}

<!DOCTYPE html>
<html>
<head>
  <title>Job Management System</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
</head>
<body>

<h1>Job Management System</h1>

<!-- Form to Add or Edit Record -->
<h2>Add/Edit Record</h2>
<form id="jobForm">
  <label for="jobNumber">Job Number:</label>
  <input type="text" id="jobNumber" name="jobNumber"><br><br>

  <label for="streetAddress">Street Address:</label>
  <input type="text" id="streetAddress" name="streetAddress">
  <label for="city">City:</label>
  <input type="text" id="city" name="city"><br><br>

  <label for="statusDescription">Status Description:</label>
  <input type="text" id="statusDescription" name="statusDescription">
  
  <label for="dateReceived">Date Received:</label>
  <input type="date" id="dateReceived" name="dateReceived">
  
  <label for="dueDate">Due Date:</label>
  <input type="date" id="dueDate" name="dueDate"><br><br>

  <label for="fieldSupervisor">Field Supervisor:</label>
  <input type="text" id="fieldSupervisor" name="fieldSupervisor">
  
  <label for="customerSupervisor">Customer Supervisor:</label>
  <input type="text" id="customerSupervisor" name="customerSupervisor"><br><br>

  <label for="priority">Priority:</label>
  <input type="text" id="priority" name="priority">
  
  <label for="jobClass">Job Class:</label>
  <input type="text" id="jobClass" name="jobClass"><br><br>

  <label for="contractor">Contractor:</label>
  <input type="text" id="contractor" name="contractor">
  
  <label for="dateCompleted">Date Completed:</label>
  <input type="date" id="dateCompleted" name="dateCompleted"><br><br>

  <label for="notes">Notes:</label>
  <textarea id="notes" name="notes"></textarea><br><br>

  <button type="button" onclick="addOrUpdateRecord()">Add/Update Record</button>
</form>


<!-- Display Records Table -->
<h2>Job Records</h2>
<table border="1" id="jobTable">
  <thead>
    <tr>
      <th>Job Number</th>
      <th>Street Address</th>
      <th>City</th>
      <th>Status Description</th>
      <th>Date Received</th>
      <th>Due Date</th>
      <th>Field Supervisor</th>
      <th>Customer Supervisor</th>
      <th>Priority</th>
      <th>Job Class</th>
      <th>Contractor</th>
      <th>Date Completed</th>
      <th>Notes</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody id="jobTableBody">
    <!-- Records will be populated here -->
  </tbody>
</table>

<!-- Script Section -->
<script>
  // Function to fetch and display data on window load
  window.onload = function () {
    google.script.run.withSuccessHandler(populateTable).getRecords();
    console.log("Window loaded");
  }

  // Function to add or update a record
  function addOrUpdateRecord() {
    console.log("Add or Update Record function called");

    // Retrieve values from form fields
    var jobNumber = document.getElementById('jobNumber').value;
    var streetAddress = document.getElementById('streetAddress').value;
    var city = document.getElementById('city').value;
    var statusDescription = document.getElementById('statusDescription').value;
    var dateReceived = document.getElementById('dateReceived').value;
    var dueDate = document.getElementById('dueDate').value;
    var fieldSupervisor = document.getElementById('fieldSupervisor').value;
    var customerSupervisor = document.getElementById('customerSupervisor').value;
    var priority = document.getElementById('priority').value;
    var jobClass = document.getElementById('jobClass').value;
    var contractor = document.getElementById('contractor').value;
    var dateCompleted = document.getElementById('dateCompleted').value;
    var notes = document.getElementById('notes').value;

    // Create an array with form field values
    var data = [jobNumber,streetAddress,city,statusDescription,dateReceived,dueDate,fieldSupervisor,customerSupervisor,priority,jobClass,contractor,dateCompleted,notes];

    // Call the server-side function to add or update the record
    google.script.run.withSuccessHandler(function () {
      document.getElementById('jobForm').reset();
      fetchAndDisplayData();
    }).addRecord(data);
  }

  // Function to edit a record
  function editRecord(row, record) {
    var selectedRecord = JSON.parse(record);
    console.log("Edit button clicked. Row:", row, "Record:", selectedRecord);

    // Populate form fields with selected record data
    document.getElementById('jobNumber').value = selectedRecord[0];
    document.getElementById('streetAddress').value = selectedRecord[1];
    document.getElementById('city').value = selectedRecord[2];
    document.getElementById('statusDescription').value = selectedRecord[3];
    document.getElementById('dateReceived').value = selectedRecord[4];
    document.getElementById('dueDate').value = selectedRecord[5];
    document.getElementById('fieldSupervisor').value = selectedRecord[6];
    document.getElementById('customerSupervisor').value = selectedRecord[7];
    document.getElementById('priority').value = selectedRecord[8];
    document.getElementById('jobClass').value = selectedRecord[9];
    document.getElementById('contractor').value = selectedRecord[10];
    document.getElementById('dateCompleted').value = selectedRecord[11];
    document.getElementById('notes').value = selectedRecord[12];
  }

  // Function to delete a record
  function deleteRecord(row) {
    google.script.run.withSuccessHandler(fetchAndDisplayData).deleteRecord(row);
  }

  // Function to fetch and display data
  function fetchAndDisplayData() {
    google.script.run.withSuccessHandler(populateTable).getRecords();
  }

 // Function to populate the table with records
function populateTable(records) {
  console.log("Data received:", records);  // Log the received data
  var tableBody = document.getElementById('jobTableBody');
  tableBody.innerHTML = '';

  if (records && records.length > 0) {
    for (var i = 0; i < records.length; i++) {
      var row = records[i];
      var newRow = tableBody.insertRow(-1);
      for (var j = 0; j < row.length; j++) {
        var cell = row[j];
        var newCell = newRow.insertCell(-1);
        newCell.textContent = cell;
      }
      var actionsCell = newRow.insertCell(-1);
      actionsCell.innerHTML = '<button onclick="editRecord(' + i + ', \'' + JSON.stringify(row).replace(/'/g, "\\'") + '\')">Edit</button> <button onclick="deleteRecord(' + i + ')">Delete</button>';
    }
  } else {
    console.log("No records found.");  // Log when no records are found
    var noRecordsRow = tableBody.insertRow(-1);
    var noRecordsCell = noRecordsRow.insertCell(-1);
    noRecordsCell.colSpan = 15;  // Set the colspan to the number of columns in your table
    noRecordsCell.textContent = "No records found.";
  }
}

</script>


</body>
</html>
database google-apps-script google-sheets html-table webapp2
1个回答
0
投票

我通过修改这两个函数将数据存入表中：

function getRecords() {
  var sheet = SpreadsheetApp.getActive().getSheetByName('Sheet1');
  var rg = sheet.getDataRange();
  var [hs, ...vs] = rg.getValues();
  return {headers: hs, records:vs};
}

function populateTable(obj) {
  console.log("Header received: %s", obj.headers)
  console.log("Data received:", obj.records);  // Log the received data
  var tableBody = document.getElementById('jobTableBody');
  tableBody.innerHTML = '';
  var records = obj.records;
  if (records && records.length > 0) {
    for (var i = 0; i < records.length; i++) {
      var row = records[i];
      console.log("Row: [%s] = %s",i,JSON.stringify(row));
      var newRow = tableBody.insertRow(-1);
      for (var j = 0; j < row.length; j++) {
        var cell = row[j];
        console.log("Cell[%s][%s] = %s",i,j,row[j])
        var newCell = newRow.insertCell(-1);
        newCell.textContent = cell;
      }
      var actionsCell = newRow.insertCell(-1);
      actionsCell.innerHTML = '<button onclick="editRecord(' + i + ', \'' + JSON.stringify(row).replace(/'/g, "\\'") + '\')">Edit</button> <button onclick="deleteRecord(' + i + ')">Delete</button>';
    }
  } else {
    console.log("No records found.");  // Log when no records are found
    var noRecordsRow = tableBody.insertRow(-1);
    var noRecordsCell = noRecordsRow.insertCell(-1);
    noRecordsCell.colSpan = 15;  // Set the colspan to the number of columns in your table
    noRecordsCell.textContent = "No records found.";
  }
}

您可能还想拥有：

<style>
    th,td {border:1px solid black;}
  </style>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.