2

我希望我的用户能够拖动材料表上的列并保持该状态持久。我可以随时获得我的专栏的状态和他们的订单。我确实救了他们。但是，当我尝试使用已保存的列顺序进行渲染时，它似乎并没有更新我的材料表。

我正在使用来自 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}
      />
}

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

4

2 回答 2

5

我使用以下方法将列顺序存储在 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}
              />
      );
    }
于 2019-10-02T14:04:35.167 回答
0

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

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

tableHeaders.push({ title: 'c', field: 'c' });
tableHeaders.push({ title: 'b', field: 'b' });
tableHeaders.push({ title: 'a', field: 'a' });
于 2019-10-03T08:45:16.273 回答