Javascript 如何访问剑道网格';仅从网格外部选择“列”菜单,并为列标题中的特定列添加筛选选项
我是剑道网格新手,尝试使用columnMenu选项。我需要访问列菜单功能(仅能够从网格外的按钮显示/隐藏列。此链接允许我这样做,并且工作正常。 但这仍然保留了我不需要的列标题中的columnMenu选项。因此,在进一步研究之后,我能够使用Javascript 如何访问剑道网格';仅从网格外部选择“列”菜单,并为列标题中的特定列添加筛选选项,javascript,filter,kendo-ui,show-hide,kendo-grid,Javascript,Filter,Kendo Ui,Show Hide,Kendo Grid,我是剑道网格新手,尝试使用columnMenu选项。我需要访问列菜单功能(仅能够从网格外的按钮显示/隐藏列。此链接允许我这样做,并且工作正常。 但这仍然保留了我不需要的列标题中的columnMenu选项。因此,在进一步研究之后,我能够使用 defaultGrid.thead.find(“[data field=Address]>.k-header-column-menu”).remove(); 其中Address是网格中的一列。我仍然需要至少有一列带有columnMenu选项,否则上述url中
defaultGrid.thead.find(“[data field=Address]>.k-header-column-menu”).remove();
其中Address是网格中的一列。我仍然需要至少有一列带有columnMenu选项,否则上述url中的解决方案将不起作用 使用上面链接中的解决方案,它还删除了列上的筛选选项。我需要实现的是从所有列标题中删除列菜单(并从网格外部访问“显示/隐藏列”选项),并使筛选选项可用于网格的特定列
这可能吗?我该怎么做?请帮助我,我不确定我是否满足了所有要求,但类似这样的要求应该可以: JS: CSS: HTML: 从grid.columns创建菜单项:
var ds = [];
for (var i = 0, max = grid.columns.length; i < max; i++) {
ds.push({
encoded: false,
text: "<label><input type='checkbox' checked='checked' " +
" class='check' data-field='" + grid.columns[i].field +
"'/>" + grid.columns[i].field + "</label>"
});
}
()这是一个非常古老的帖子,但在搜索类似的东西后,我在Terlerik论坛上找到了一篇帖子,其中一位用户提到了“kendoColumnMenu”。据我所知,这篇帖子是没有文档的 它还显示了如何向为保存网格状态或您选择的其他配置选项而创建的菜单中添加其他选项 以下是文章的链接,其中还包含一个指向DOJO的链接,其中包含工作代码:
希望这将有助于其他人搜索此信息。有人对此查询有解决方案吗?我需要相同的解决方案嘿,谢谢你。我们试图解决的主要问题是,当我按下按钮时,我必须导航到其他列按钮。我们正在从slickgrid和slickgrid移动到剑道网格此菜单:这显示了期望的结果:很可能这不容易实现。我再给一天时间,但我们可能只需要使用APIyeah,为此,我可能只需要使用剑道菜单;请参见编辑以获取示例(可能需要熨平的一些事情)谢谢,伙计,这很好。是的,我们可以从这里开始:D@The可怕的海盗Stephen不知道你是如何发现这个方法的,我在API文档中找不到它。但它对我来说很好!另一个注意事项是,它不适用于IE 11中的按钮元素,必须使用示例中的DIV,并将其样式设置为button.Che呃!我通过查看Grid小部件的源代码找到了kendoColumnMenu(),查看它是如何创建菜单的,以及我是否可以出于自己的目的“窃取”实现
.k-header-column-menu {
visibility: hidden
}
<div id='grid'></div>
<div>
<button class='grid-menu' data-field="foo">Show foo menu</button>
<button class='grid-menu' data-field="bar">Show bar menu</button>
</div>
var grid = $("#grid").kendoGrid({
dataSource: [{
foo: "foo",
bar: "bar"
}],
filterable: true,
columnMenu: false
}).getKendoGrid();
var ds = [];
for (var i = 0, max = grid.columns.length; i < max; i++) {
ds.push({
encoded: false,
text: "<label><input type='checkbox' checked='checked' " +
" class='check' data-field='" + grid.columns[i].field +
"'/>" + grid.columns[i].field + "</label>"
});
}
$("#menu").kendoMenu({
dataSource: [{
text: "Menu",
items: ds
}],
openOnClick: true,
closeOnClick: false,
open: function () {
var selector;
// deselect hidden columns
$.each(grid.columns, function () {
if (this.hidden) {
selector = "input[data-field='" + this.field + "']";
$(selector).prop("checked", false);
}
});
},
select: function (e) {
// ignore click on top-level menu button
if ($(e.item).parent().filter("div").length) return;
var input = $(e.item).find("input.check");
var field = $(input).data("field");
if ($(input).is(":checked")) {
grid.showColumn(field);
} else {
grid.hideColumn(field);
}
}
});