剑道网格单按钮网格列菜单显示/隐藏网格列答案

【问题标题】：Kendo Grid Single-Button Grid Column Menu to Show/Hide Grid Columns剑道网格单按钮网格列菜单显示/隐藏网格列
【发布时间】：2016-11-29 09:46:17
【问题描述】：

我不想在网格中的每一列上显示一个列菜单，而是希望在网格顶部有一个菜单，我可以用它来控制列的显示/隐藏和列的冻结/解冻。

请参阅附上的参考图片以了解想法。

【问题讨论】：

标签： jquery kendo-ui kendo-grid kendo-ui-mvc kendo-ui-grid

【解决方案1】：

Kendo UI 框架具有 kendoColumnMenu 小部件。假设 'grid' 是一个网格元素，我们有： HTML（fa-...是字体很棒的样式）：

<a class="btn btn-icon grid-column-menu fa fa-columns" href="#" title="Manage columns."></a>

JS：

var $gridColumnMenuButton = $(".grid-column-menu").kendoColumnMenu({
    filterable: false,
    sortable: false,
    dataSource: grid.data("kendoGrid").dataSource,
    columns: true,
    owner: grid.data("kendoGrid"),
});

$gridColumnMenuButton.on("click", function(e) {
    $(this).find(".k-header-column-menu").click();

    return false;
});

CSS：

.grid-column-menu .k-header-column-menu {
height: 35px;
visibility: hidden;
position: absolute;
left: 0; }

这将允许您隐藏/取消隐藏列。

【讨论】：

没有 kendoColumnMenu 小部件。你指的是kendoMenu吗？ demos.telerik.com/kendo-ui/menu/index
根据telerik.com/forums/…，这是一个“未记录的”函数

【解决方案2】：

首先，将 id 设置为 kendo grid 指令：<kendo-grid id="grid"><kendo-grid>，准确地说是 kendo-grid；其次，使用复选框或您想要的内容创建您自己的html，以获取字段名称是否隐藏，例如：

<ul>
<li><input type="checkbox" id="Id" /><span>Id</span></li> 
<li><input type="checkbox" id="Name" /><span>Name</span></li>
</ul>

那就全部搞定吧：

 var columns = JSON.stringify({
                "Id":$('#Id').is(':checked');,
                "Name": $('#Name').is(':checked');,
            });

然后迭代它们：

var grid = $("#grid").data("kendoGrid");
    angular.forEach(columns , function (value, key) {
                        if (value) {
                            grid.showColumn(key);
                        } else {
                            grid.hideColumn(key);
                        }
                    });

/////////////////////////////////////////////
grid.showColumn("FieldName"); // by column field
grid.showColumn(1); // by column index

冻结/解冻：只需将禁用属性添加到输入

【讨论】：