隐藏和显示列 - 剑道网格

Posted 2023-05-07

【中文标题】隐藏和显示列 - 剑道网格

【英文标题】：hide and show columns- kendo grid

【发布时间】：2014-08-05 23:11:03

【问题描述】：

如何在不使用 jquery 的情况下隐藏和显示剑道网格​​的列？ 这是示例的 js fiddle 链接：http://jsfiddle.net/tmLmk/7/

html 代码：

<div ng-controller="GridController">    
    <div kendo-grid k-options="options" k-data-source="sData"></div>
</div>

JS代码：

angular.module('angular-kendo-example', ['kendo.directives']);

function GridController($scope) 
    $scope.options = 
        sortable: true,
        pageable: true,
        columns: [
            field: "column1",
            title: "column 1",
            width: "40px"
        ,
            field: "column2",
            title: "column 2",
            width: "70px"
        ,
            field: "column3",
            title: "column 3",
            width: "70px"
        ,
            field: "column4",
            title: "column 4",
            width: "60px"
        ,
            field: "column5",
            title: "column 5",
            width: "40px"
        ,
            field: "column6",
            title: "column 6",
            width: "40px"
        ],

    ;
    $scope.sData= [
         column1: "column1 data", column2: "column2 data", column3: "column3 data", column4:  "column4 data",  column5: "column5 data", column6: "column6 data"  ,  column1: "column1 data", column2: "column2 data", column3: "column3 data", column4:  "column4 data",  column5: "column5 data", column6: "column6 data"  ,  column1: "column1 data", column2: "column2 data", column3: "column3 data", column4:  "column4 data",  column5: "column5 data", column6: "column6 data"  
    ];

谢谢。

【参考方案1】：

如果你添加

columnMenu = 真，

在声明列之前，这应该为您提供列菜单，该菜单应该启用显示和隐藏列选项。

这个链接应该有帮助

http://demos.telerik.com/kendo-ui/grid/column-menu

【讨论】：

感谢您的回答。有效。但是禁用这些列会随意调整其他列的大小。如何解决？

调整大小是因为其他列占用了隐藏列留下的可用空间。我不确定在隐藏所有列后，如果不为所有列设置新宽度，您可以做很多事情。

是的，但在此示例中：jsfiddle.net/tmLmk/14，一旦我隐藏 1 列，这些列看起来就会折叠。如何预防？

从列中获取宽度允许它们自动增长并使用可用空间。 jsfiddle.net/4q35k 我的零钱。也许将 css min-width 类应用于列将解决折叠的问题。

【参考方案2】：

给定 AngularJS 中的 Kendo UI Grid 的名称，在你的情况下 $scope.options

您可以以编程方式通过列索引隐藏每一列，如下所示：

$scope.options.columns[3].hidden = true;