,可以通过以下步骤实现:
$("#gridContainer").dxDataGrid({
// 其他配置项...
columnChooser: {
enabled: true
}
});
$("#gridContainer").dxDataGrid({
// 其他配置项...
columns: [
{ dataField: "id", visible: true },
{ dataField: "name", visible: true },
{ dataField: "age", visible: false },
// 其他列定义...
]
});
$("#gridContainer").dxDataGrid({
// 其他配置项...
onOptionChanged: function(e) {
if (e.fullName === "columns[0].visible" || e.fullName === "columns[1].visible" || e.fullName === "columns[2].visible") {
var visibleColumns = $("#gridContainer").dxDataGrid("instance").getVisibleColumns();
var visibleColumnNames = visibleColumns.map(function(column) {
return column.dataField;
});
localStorage.setItem("gridVisibleColumns", JSON.stringify(visibleColumnNames));
}
}
});
$(function() {
var savedVisibleColumns = localStorage.getItem("gridVisibleColumns");
if (savedVisibleColumns) {
savedVisibleColumns = JSON.parse(savedVisibleColumns);
$("#gridContainer").dxDataGrid("instance").columnOption("id", "visible", savedVisibleColumns.includes("id"));
$("#gridContainer").dxDataGrid("instance").columnOption("name", "visible", savedVisibleColumns.includes("name"));
$("#gridContainer").dxDataGrid("instance").columnOption("age", "visible", savedVisibleColumns.includes("age"));
}
});
通过以上步骤,你可以在devextreme DataGrid上实现按columnChooser保存或缓存选定的列。用户在选择列的可见性时,选择将会保存到本地存储中,并在下次加载页面时自动应用。这样,用户就可以自定义显示哪些列,以满足其个性化需求。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云