Question

我希望我的用户能够拖动材料表上的列并使该状态保持不变。我可以随时获取列的状态及其顺序。我确实救了他们。但是，当我尝试使用保存的列顺序渲染时，似乎并没有更新材质表。

我正在使用来自material-table.com的react Material-Table

这是我要执行的代码：

const tableHeaders = [];
tableHeaders.push({ title: 'a', field: 'a' });
tableHeaders.push({ title: 'b', field: 'b' });
tableHeaders.push({ title: 'c', field: 'c' });

const Table = (props) => {

   const [state, setState] = useState({
      headers: tableHeaders,
      data: data // some data
   });


   const handleColumnDragged = (start, end) => {

      // process the order of columns
      // create as an array i.e. order = [2, 1, 0]

      updateOrder(order);

      // save to database

   }

   const updateHeaderOrder = (order) => {
      let newHeaders = [];
      order.forEach( i => {
         newHeaders.push(tableHeaders[i]);
      });
      setState({ ...state, headers: newHeaders });
   }

   useEffect(() => {

      resource.fetchHeaderOrder( order => {
         updateHeaderOrder(order);
      });

   }, [resource]);


   return (
      <MaterialTable
          columns={state.headers}
          data={state.data}
          onColumnDragged={handleColumnDragged}
      />
}

是否可以这样做？材料是否设计为每次仅具有相同的列顺序？他们是否允许拖动事件很奇怪，如果是这样的话？

Answer 1

我使用以下方法将列顺序存储在localStorage中。您可以对其进行增强，以将列顺序存储在数据库中。

    export default function Monitor() {
      let columns = [];
      let data = [...]

      // Checking if key exists in local storage  
      if (localStorage.getItem('table1') === null) {
        // If key doesn't exists then store the actual column order in local storage
        localStorage.setItem(
          'table1',
          JSON.stringify({
            0: { title: 'Avatar', field: 'avatar', removable: false },
            1: { title: 'First Name', field: 'first_name' },
            2: { title: 'Last Name', field: 'last_name' },
            3: { title: 'Last Change', field: 'lastChange' },
            4: { title: 'Last Changed By', field: 'lastChangedBy' }
          })
        );
      }

      let savedColumns = JSON.parse(localStorage.getItem('table1'));
      for (var columnIndex in savedColumns) {
        columns.push(savedColumns[columnIndex]);
      }

      function handleColumnDrag(sourceIndex, destinationIndex) {
        const sourceColumn = savedColumns[sourceIndex];
        const destinationColumn = savedColumns[destinationIndex];

        // Swapping the column order
        savedColumns[sourceIndex] = destinationColumn;
        savedColumns[destinationIndex] = sourceColumn;
        localStorage.setItem('table1', JSON.stringify(savedColumns));
      }

      return (   
              <MaterialTable
                columns={columns}
                data={data}
                onColumnDragged={handleColumnDrag}
                icons={tableIcons}
              />
      );
    }

Answer 2

您可以将订单存储在数据库中的服务器上或本地的localStorage中，但是持久性完全取决于您。

另一方面，material-table将按照您声明的顺序渲染列。如果您以不同的顺序在顶部推送标题，顺序不会改变吗？例如：

tableHeaders.push({ title: 'c', field: 'c' });
tableHeaders.push({ title: 'b', field: 'b' });
tableHeaders.push({ title: 'a', field: 'a' });

是否可以将物料表的列的顺序保存到数据库以保持其持久性？

2 个答案: