我希望我的用户能够拖动材料表上的列并使该状态保持不变。我可以随时获取列的状态及其顺序。我确实救了他们。但是,当我尝试使用保存的列顺序渲染时,似乎并没有更新材质表。
我正在使用来自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}
/>
}
是否可以这样做?材料是否设计为每次仅具有相同的列顺序?他们是否允许拖动事件很奇怪,如果是这样的话?
答案 0 :(得分:2)
我使用以下方法将列顺序存储在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}
/>
);
}
答案 1 :(得分:0)
您可以将订单存储在数据库中的服务器上或本地的localStorage中,但是持久性完全取决于您。
另一方面,material-table
将按照您声明的顺序渲染列。如果您以不同的顺序在顶部推送标题,顺序不会改变吗?例如:
tableHeaders.push({ title: 'c', field: 'c' });
tableHeaders.push({ title: 'b', field: 'b' });
tableHeaders.push({ title: 'a', field: 'a' });