سلام. من برای آپدیت کردن یه متغیر که آرایه ای از آبجکت هاست کدم به صورت زیره:
if (data.name === changedColumn) {
return {
...data,
options:{sortDirection:direction}
};
} else
return {
...data,
options: {}
};
این کد همه ی اون چیزایی که توی option هست رو بر میداره و sortDirection رو ست میکنه. من میخوام اون چیزایی که توی option هستن باقی بمونن و فقط sortDirection آپدیت بشه. ممنون میشم راهنمایی کنید چجوری کد رو آپدیت کنم
@hesammousavi
@sinashahoveisi
@kamran.davar
@mohsenbostan
@parastooebrahimi
سلام.
به صورت زیر بنویسید :
options:{ ...data.options, sortDirection:direction}
سلام با تغییر کد زیر مشکل حل میشه.
col = col.map(data => {
if (data.name === sortField) {
console.log("sina log", data.options);
return {
...data,
options: {
...data.options,
sortDirection: sortDir
}
};
} else{
delete data.options.sortDirection
return {
...data,
options: {
...data.options,
}
};
}
});
برای تست هم فایل Example.js :
import React from "react";
import { CircularProgress, Typography } from "@material-ui/core";
import MUIDataTable from "mui-datatables";
class Example extends React.Component {
state = {
page: 0,
count: 1,
rowsPerPage: 5,
sortOrder: {},
data: [["Loading Data..."]],
columns: [
{
name: "fullName",
options: { filter: false }
},
{
name: "title",
label: "Title",
options: {filter: false}
},
{
name: "location",
label: "Location",
options: {}
}
],
isLoading: false
};
componentDidMount() {
this.getData("", 0);
}
// get data
getData = (url, page) => {
this.setState({ isLoading: true });
this.xhrRequest(url, page).then(res => {
this.setState({ data: res.data, isLoading: false, count: res.total });
});
};
getSrcData = () => {
return [
{
fullName: "Gabby George",
title: "Business Analyst",
location: "Minneapolis"
},
{
fullName: "Aiden Lloyd",
title: "Business Consultant",
location: "Dallas"
},
{ fullName: "Jaden Collins", title: "Attorney", location: "Santa Ana" },
{
fullName: "Franky Rees",
title: "Business Analyst",
location: "St. Petersburg"
},
{ fullName: "Aaren Rose", title: "Business Analyst", location: "Toledo" },
{
fullName: "John George",
title: "Business Analyst",
location: "Washington DC"
},
{
fullName: "Pat Lloyd",
title: "Computer Programmer",
location: "Baltimore"
},
{
fullName: "Joe Joe Collins",
title: "Attorney",
location: "Las Cruces"
},
{ fullName: "Franky Hershy", title: "Paper Boy", location: "El Paso" },
{
fullName: "Aaren Smalls",
title: "Business Analyst",
location: "Tokyo"
},
{ fullName: "Boogie G", title: "Police Officer", location: "Unknown" },
{
fullName: "James Roulf",
title: "Business Consultant",
location: "Video Game Land"
},
{
fullName: "Mike Moocow",
title: "Burger King Employee",
location: "New York"
},
{
fullName: "Mimi Gerock",
title: "Business Analyst",
location: "McCloud"
},
{
fullName: "Jason Evans",
title: "Business Analyst",
location: "Mt Shasta"
},
{
fullName: "Simple Sam",
title: "Business Analyst",
location: "Mt Shasta"
},
{
fullName: "Marky Mark",
title: "Business Consultant",
location: "Las Cruces"
},
{ fullName: "Jaden Jam", title: "Attorney", location: "El Paso" },
{
fullName: "Holly Jo",
title: "Business Analyst",
location: "St. Petersburg"
},
{ fullName: "Suzie Q", title: "Business Analyst", location: "New York" }
];
};
sort = (page, sortOrder) => {
this.setState({ isLoading: true });
console.log("sina", sortOrder);
this.xhrRequest(
`/myApiServer?page=${page}&sort_order=${sortOrder}`,
page,
sortOrder
).then(res => {
this.setState({
data: res.data,
page: res.page,
sortOrder,
isLoading: false,
count: res.total
});
});
};
// mock async function
xhrRequest = (url, page, sortOrder = {}) => {
return new Promise((resolve, reject) => {
// mock page data
let fullData = this.getSrcData();
let sortField = sortOrder.name;
let sortDir = sortOrder.direction;
const total = fullData.length; // mock record count from server - normally this would be a number attached to the return data
let col = this.state.columns;
console.log("col before", col);
col = col.map(data => {
if (data.name === sortField) {
console.log("sina log", data.options);
return {
...data,
options: {
...data.options,
sortDirection: sortDir
}
};
} else{
delete data.options.sortDirection
return {
...data,
options: {
...data.options,
}
};
}
});
console.log("col after", col);
this.setState(prevState => {
return {
...prevState,
columns: col
};
});
console.log("log", fullData[0], sortField);
if (sortField) {
fullData = fullData.sort((a, b) =>
a[sortField] > b[sortField]
? 1
: a[sortField] === b[sortField]
? a[sortField] > b[sortField]
? 1
: -1
: -1
);
}
const srcData = fullData.slice(
page * this.state.rowsPerPage,
(page + 1) * this.state.rowsPerPage
);
let data = srcData;
setTimeout(() => {
resolve({
data,
total,
page
});
}, 500);
});
};
changePage = (page, sortOrder) => {
sortOrder = {
name: "title",
direction: "asc"
};
console.log("page", page, sortOrder);
this.setState({
isLoading: true
});
this.xhrRequest(`/myApiServer?page=${page}`, page, sortOrder).then(res => {
this.setState({
isLoading: false,
page: res.page,
sortOrder,
data: res.data,
count: res.total
});
});
};
render() {
const { data, page, count, isLoading, rowsPerPage, sortOrder } = this.state;
const options = {
filter: true,
filterType: "dropdown",
responsive: "vertical",
serverSide: true,
count: count,
rowsPerPage: rowsPerPage,
rowsPerPageOptions: [],
onTableChange: (action, tableState) => {
console.log(action, tableState);
// a developer could react to change on an action basis or
// examine the state as a whole and do whatever they want
switch (action) {
case "changePage":
this.changePage(tableState.page, tableState.sortOrder);
break;
case "sort":
let a = tableState.announceText
.replace("Table now sorted by ", "")
.replace(" :", "")
.split(" ");
if (a[1] === "descending") a[1] = "desc";
else a[1] = "asc";
let b = { name: a[0], direction: a[1] };
console.log(a);
this.sort(tableState.page, b);
break;
default:
console.log("action not handled.");
}
}
};
console.log("COLUMNS");
console.dir(JSON.parse(JSON.stringify(this.state.columns)));
return (
<div>
<MUIDataTable
title={
<Typography variant="h6">
ACME Employee list
{isLoading && (
<CircularProgress
size={24}
style={{ marginLeft: 15, position: "relative", top: 4 }}
/>
)}
</Typography>
}
data={data}
columns={this.state.columns}
options={options}
/>
</div>
);
}
}
export default Example;
@parastooebrahimi
کدی که آقای @mohsenbostan گفتن باید درست کار بکنه. حالا اگه درست کار نمیکنه پس ایراد کارتون از یه جای دیگه است.
if (data.name === changedColumn) {
return {
...data,
options:{ ...data.options, sortDirection:direction}
};
} else
return {
...data,
options: { ...data.options, sortDirection:{}}
};
}
به این هم توجه داشته باشید که mui datatable اگر توی options یک prop داشته باشید که توی داکیومنتیشنش نباشه خودش خود به خود پاکش میکنه
مثلا اگه
options: { filter: false }
باشه،با کد بالا دیگه پاک نمیشه ولی اگه مثلا یه چیزی بزنید که براش بی معنی باشه مثل :
options: { salam: false }
این خودش پاکش میکنه و شاید شما فکر کنید که کد درست کار نمیکنه در صورتی که کد درست هستش
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟