Question

我没有在网格中的每一列上显示列菜单，而是想在网格顶部使用单个菜单来控制显示/隐藏列和＆amp;冻结/解冻柱子。

参见随附的参考图片以获得一个想法。

Answer 1

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

<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; }

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

Answer 2

首先，将id设置为kendo网格指令：<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

冻结/取消冻结：只需将禁用的属性添加到输入中

Kendo Grid单按钮网格列菜单显示/隐藏网格列

2 个答案: