是否可以将物料表的列的顺序保存到数据库中以保持其持久性? [英] Is it possible to save the order of the column of material table to a database to keep it persistent?

问题描述

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

I want my users to be able to drag the columns on the material table and keep that state persistent. I can get the states of my columns and their orders at any time. I do save them. However, when I try to render with the saved order of my columns it doesn't seem to update my material table.

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

I'm using react Material-Table from material-table.com

这是我要执行的代码:

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}
      />
}

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

Is it possible to do this or not? Is material designed to only have the same column order everytime? It's weird that they allow drag event though if that is the case?

推荐答案

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

I use the following approach to store the column order in localStorage. You can enhance it to store column order in the database.

    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}
              />
      );
    }

这篇关于是否可以将物料表的列的顺序保存到数据库中以保持其持久性?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！