当 windows 变小时隐藏 ui-grid 列

Question

如果 window 以及 ui-grid 变得更小，是否可以隐藏某些 ui-grid 列？我想设置一些优先级，当 window 变小时哪些列应该保持可见，哪些列不那么重要。这些应该被隐藏，以便其他列可以有 required space 来显示数据。

例如，如果 window 变小，我想保留第 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)
             }
        }
    ];

当 windows 变小时隐藏 ui-grid 列

Hide ui-grid columns when windows becomes smaller

angularjs

ui-grid