step 1: online samples for DHTMLX Grid
step 2: Grid.Sorting
Step 3: Replace JavaScript content with the following steps
step 4: Change the adjust value of the grid to true or false to wait for the display time difference
There is a huge difference in performance. When adjust is true, the data.add function is almost unusable
const grid = new dhx.Grid("grid", {
columns: [
{ minWidth: 150, id: "country", header: [{ text: "Country" }] },
{ id: "population", header: [{ text: "Population" }] },
{ id: "yearlyChange", header: [{ text: "Yearly Change" }] },
{ id: "netChange", header: [{ text: "Net Change" }] },
{ id: "density", header: [{ text: "Density (P/Km²)" }] },
{ id: "area", header: [{ text: "Land Area (Km²)" }] },
{ id: "migrants", header: [{ text: "Migrants (net)" }] },
{ id: "fert", header: [{ text: "Fert. Rate" }] },
{ id: "age", header: [{ text: "Med. Age" }] },
{ id: "urban", header: [{ text: "Urban Pop" }] }
],
// data: dataset,
adjust: false
});
dataset.forEach(item=>{delete item.id});
let datas = new Array();
for (let i = 0; i < 50; i++) {
JSON.parse(JSON.stringify(dataset)).forEach(item=>{datas.push(item)});
}
let startTime = new Date();
grid.data.parse(datas)
let timeDiff = new Date().getTime() - startTime.getTime();
grid.data.removeAll();
let startTime1 = new Date();
grid.data.add(datas)
let timeDiff1 = new Date().getTime() - startTime1.getTime();
const message = dhx.message({
text:"rows:"+grid.data.getLength()+",adjust:"+grid.config.adjust+",time:"+timeDiff+"|"+",time1:"+timeDiff1,
icon:"dxi-clock",
css:"expire",
expire:10000
});