当窗口变小时，隐藏ui-grid列

Question

如果窗口以及ui-grid变小，是否可以隐藏某些ui-grid列？我想设置一些优先级，当窗口变小时，哪些列应该保持可见，哪些不那么重要。这些应该被隐藏，以便其他列可能具有显示数据所需的空间。

例如，如果窗口变小，我想保留第1、4和5列...

...但是如果全部足够大，则显示所有5个。

我在Kendo UI中看不到诸如columns.minScreenWidth之类的东西。我知道可以定义visible属性，但是我不知道如何根据尺寸设置它。网格。

我当前的列定义：

vm.grid.columnDefs = [
        {
            name: 'one',
            displayName: 'Column of highest priority',
            enableHiding: false,
            minWidth: 400
        }, {
            name: 'two',
            displayName: 'Less Important',
            enableHiding: false,
            type: 'date'
        }, {
            name: 'three',
            displayName: 'Even Less Important',
            enableHiding: false
        }, {
            name: 'four',
            displayName: 'Should be visible',
            cellFilter: 'date:"dd/MM/yyyy"',
            enableHiding: true,
            type: 'date'
        }, {
            name: 'five',
            displayName: 'Should also be visible',
            visible: vm.showFithColumn,
            enableHiding: false
        }
    ];

Answer 1

要了解Windows宽度，可以使用$window.innerWidth。

因此，一个例子可能是：

var windowsWidth=$window.innerWidth;

vm.grid.columnDefs = [
        {
            name: 'one',
            displayName: 'Column of highest priority',
            enableHiding: false,
            minWidth: 400
        }, {
            name: 'two',
            displayName: 'Less Important',
            visible: function(value){
                 return (windowsWidth>300)
             }
            type: 'date'
        }, {
            name: 'three',
            displayName: 'Even Less Important',
            visible: function(value){
                 return (windowsWidth>400)
             }
        }, {
            name: 'four',
            displayName: 'Should be visible',
            cellFilter: 'date:"dd/MM/yyyy"',
            visible: function(value){
                 return (windowsWidth>500)
             }
            type: 'date'
        }, {
            name: 'five',
            displayName: 'Should also be visible',
            visible: function(value){
                 return (windowsWidth>600)
             }
        }
    ];