[英]How to hide ag-grid column on mobile?
I'm trying to hide a column in ag-grid on mobile. 我正在尝试在移动设备上的ag-grid中隐藏一列。
I'm using ag-grid for a vue.js app. 我正在将ag-grid用于vue.js应用程序。 I have tired the below code, but it's not working properly.
我已经厌倦了下面的代码,但是不能正常工作。
{
headerName: "Action",
field: "action",
minWidth: 54,
suppressMovable: true,
editable: true,
hide : ( window.innerWidth < 786 ? true : false )
}
I expect the output to be hide this column on mobile and show on desktop, but the output is bit strange to me. 我希望输出隐藏在移动设备上的此列并在桌面上显示,但是输出对我来说有点奇怪。 Initially when I load the page on mobile and desktop the column hide/show accordingly, but on mobile it's also hide some of other column's header titles(only header titles).
最初,当我在移动设备和台式机上加载页面时,列会相应地隐藏/显示,但在移动设备上,它还会隐藏其他一些列的标题(仅标题)。 Also when I resize the window from mobile to desktop the require column won't show and also resizing from desktop to mobile won't hide the required column.
同样,当我将窗口的大小从移动设备调整为桌面时,require列将不会显示,并且从桌面大小调整为移动设备也不会隐藏必填列。
You should use columnApi.setColumnVisible("your_column", false). 您应该使用columnApi.setColumnVisible(“ your_column”,false)。
To be able to do so, first save the columnApi on @grid-ready 为此,请先将columnApi保存在@ grid-ready上
<template>
<ag-grid-vue style="width: 500px; height: 500px;"
class="ag-theme-balham"
:columnDefs="columnDefs"
:rowData="rowData"
rowSelection="multiple"
@grid-ready="onGridReady">
</template>
... ...
import {AgGridVue} from "ag-grid-vue";
const hideActionColumn = () => {
if(this.columnApi) {
this.columnApi.setColumnVisible("action", true);
if(window.innerWidth < 786) {
this.columnApi.setColumnVisible("action", false);
}
}
}
export default {
name: 'App',
data() {
return {
columnDefs: null,
rowData: null
}
},
components: {
AgGridVue
},
methods: {
onGridReady(params) {
this.columnApi = params.columnApi;
}
},
mounted() {
// hide the column, if the initial load is in mobile view
hideActionColumn();
window.addEventListener('resize', hideActionColumn);
},
beforeDestroy() {
window.removeEventListener('resize', hideActionColumn);
}
}
Then you need to appends an event listener, so you can call hideActionColumn() on window.resize 然后,您需要追加一个事件侦听器,以便可以在window.resize上调用hideActionColumn()
window.addEventListener('resize', hideActionColumn);
Also you need to remove the event listener, before your component is destroyed. 同样,您需要在组件被销毁之前删除事件侦听器。
I hope this will help you. 我希望这能帮到您。 Regards
问候
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.