PrimeNG可编辑DataTable问题：列无法渲染可编辑状态及获取输入值

Hey there! Let's work through these two issues step by step—they're super common when building editable tables, so I'll break down exactly what you need to do.

问题1：将careOfferingSpaceAvailableId列渲染为可编辑状态 #

The key here is replacing static text in the table cell with an editable input component (like <input>) and binding it to your data. The approach varies a bit depending on whether you're using a framework or vanilla JS, but here are the most common scenarios:

如果你用React + UI组件库（比如Ant Design Table） #

Update your column configuration to render an input instead of plain text, and use state to track changes:

import { useState } from 'react';
import { Table } from 'antd';

// 初始表格数据
const initialData = [
  { id: 1, careOfferingSpaceAvailableId: 5, otherField: "..." },
  { id: 2, careOfferingSpaceAvailableId: 3, otherField: "..." },
];

function EditableTable() {
  const [tableData, setTableData] = useState(initialData);

  // 处理输入框变化，更新对应行的数据
  const handleInputChange = (rowId, newValue) => {
    setTableData(prevData => 
      prevData.map(row => 
        row.id === rowId ? { ...row, careOfferingSpaceAvailableId: newValue } : row
      )
    );
  };

  const columns = [
    // 其他列配置...
    {
      title: "Spaces Available",
      dataIndex: "careOfferingSpaceAvailableId",
      key: "careOfferingSpaceAvailableId",
      render: (text, record) => (
        <input
          type="number"
          value={text}
          onChange={(e) => handleInputChange(record.id, e.target.value)}
        />
      ),
    },
  ];

  return <Table dataSource={tableData} columns={columns} />;
}

This will render an editable input in every cell of the careOfferingSpaceAvailableId column, and any changes will be saved directly to your component state.

如果你用Vanilla JavaScript（无框架） #

Render each table cell with an input that includes a data-id attribute to link it to the row's careOfferingSpaceAvailableId:

<table id="spaces-table">
  <thead>
    <tr>
      <!-- 其他表头 -->
      <th>Spaces Available</th>
    </tr>
  </thead>
  <tbody>
    <!-- 示例行 -->
    <tr>
      <!-- 其他单元格 -->
      <td>
        <input 
          type="number" 
          class="space-input" 
          data-id="1" 
          value="5"
        >
      </td>
    </tr>
  </tbody>
</table>

This makes each cell editable right away, and the data-id will help us link inputs to their corresponding rows later.

问题2：点击"Next"按钮后获取输入值与对应ID #

Once you've got the editable inputs set up, collecting the data for database updates is straightforward—you just need to gather each input's value and its linked ID.

框架（React）方案 #

Since you're already tracking changes in state, you can directly map over your tableData to create the payload for your API call when the "Next" button is clicked:

const handleNextClick = async () => {
  // 整理需要更新的数据：每个项包含行ID和新值
  const updatePayload = tableData.map(row => ({
    careOfferingSpaceAvailableId: row.id, // 对应行的唯一标识
    newSpaceValue: row.careOfferingSpaceAvailableId // 用户输入的新值
  }));

  try {
    // 发送请求到后端更新数据库
    const response = await fetch('/api/update-spaces', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(updatePayload)
    });
    const result = await response.json();
    console.log("Update successful:", result);
    // 这里可以添加跳转或其他后续逻辑
  } catch (error) {
    console.error("Update failed:", error);
  }
};

// 在组件中添加按钮
<button onClick={handleNextClick}>Next</button>

Vanilla JavaScript方案 #

Query all the editable inputs, then extract their values and data-id attributes to build your update payload:

document.getElementById('next-btn').addEventListener('click', async () => {
  const inputs = document.querySelectorAll('.space-input');
  const updatePayload = Array.from(inputs).map(input => ({
    careOfferingSpaceAvailableId: input.dataset.id,
    newSpaceValue: input.value
  }));

  try {
    const response = await fetch('/api/update-spaces', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(updatePayload)
    });
    const result = await response.json();
    console.log("Update successful:", result);
  } catch (error) {
    console.error("Update failed:", error);
  }
});

关键注意事项 #

• Always validate user input before sending it to the database (e.g., check that the value is a positive number if that's required).
• If you're working with large datasets, consider debouncing input changes to avoid excessive state updates.
• For backend updates, make sure your API endpoint accepts bulk updates (or loop through the payload to update rows individually if needed).

内容的提问来源于stack exchange，提问作者BadGuyKUTA