jquery - 剑道网格单按钮网格列菜单显示/隐藏网格列

Question

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

请参阅随附的参考图片以获取想法。

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

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

Answer 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

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