如何访问剑道网格's列菜单，并为列标题中的特定列添加筛选选项
How to access Kendo Grid's column menu only from outside the grid and add the filter option for specific columns in the column header
我是Kendo Grid的新手，正在尝试使用columnMenu选项。我需要访问列菜单功能（只有通过网格外的按钮显示/隐藏列的功能。这个链接允许我这样做，它运行得很好。如何显示剑道网格'；s columnMenu使用脚本
但这仍然保留了列标题中的columnMenu选项，我不需要它。因此，在进一步研究之后，我能够使用
删除加载中的列标题defaultGrid.thead.find（"[data field=Address]>.k-header-column-menu"）.remove（）
其中Address是网格中的一列。我仍然需要至少有一列带有columnMenu选项，否则上面url中的解决方案将不起作用。
使用上面链接中的解决方案，它还删除了列上的筛选器选项。我需要实现的是从所有列标题中删除"列菜单"（并从网格外访问显示/隐藏列选项），并为网格的特定列提供过滤器选项
这可能吗？我该怎么做？请帮助
不确定我是否满足了所有要求，但这样的东西应该可以工作：
JS:
var grid = $("#grid").kendoGrid({
dataSource: [{
foo: "foo",
bar: "bar"
}],
filterable: true,
columnMenu: true
}).getKendoGrid();
function showMenu() {
var offset = $(this).offset();
var fieldName = $(this).data("field");
var th = $(grid.thead).find("th[data-field='" + fieldName + "']");
$(th).find(".k-header-column-menu:first").click();
$(".k-column-menu").parent().css({
top: offset.top + $(this).outerHeight(),
left: offset.left
});
}
$(document).on("click", ".grid-menu", showMenu);
CSS：
.k-header-column-menu {
visibility: hidden
}
HTML:
<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);
}
}
});
（演示）
这是一个相当古老的线程，但在搜索了类似的内容后，我在Terlerik论坛上发现了一篇帖子，用户在其中引用了"kendoColumnMenu"。据我所知，这是非法的。
它还显示了如何将其他选项添加到为保存网格状态或您选择的其他配置选项而创建的菜单中。
这是帖子的链接，其中还包含DOJO的链接，工作代码：点击此处
希望这能帮助其他人寻找这个。
我让剑道列菜单包括过滤器设置，这对我来说很有效，
// column settings dropdown maker
function GridGorunumAyarlaMenu(GridName) {
var ColumnMenuListHTML = "";
var CheckBoxType = "";
var LockSignType = "";
var Col_uid = "";
var GridColumns = $("#" + GridName).data("kendoGrid").columns;
// column setting area
$("#" + GridName + " .k-header").each(function(i, item) {
for (var i = 0; i < GridColumns.length; i++) {
if (GridColumns[i].uid == $(item).attr("id") && GridColumns[i].title != undefined) {
if (GridColumns[i].hidden == true) {
CheckBoxType = '<div onclick=' + "ShowHideColumnSet('" + GridColumns[i].uid + "','" + GridName + "')" + ' class="checkbox checkbox-success input-group"><input class="form-check-input" type="checkbox" id="Ch' + GridColumns[i].uid + '">';
} else {
CheckBoxType = '<div onclick=' + "ShowHideColumnSet('" + GridColumns[i].uid + "','" + GridName + "')" + ' class="checkbox checkbox-success input-group"><input class="form-check-input" type="checkbox" id="Ch' + GridColumns[i].uid + '" checked>';
}
var ColumnDiv = $(item).parent().closest("div");
if (ColumnDiv.hasClass("k-grid-header-locked")) {
LockSignType = '<i onclick=' + "LockUnlockColumn('" + GridColumns[i].uid + "','" + GridName + "')" + ' class="cLocked fa fa-lock pull-right"></i>';
} else {
LockSignType = '<i onclick=' + "LockUnlockColumn('" + GridColumns[i].uid + "','" + GridName + "')" + ' class="cLocked fa fa-unlock pull-right"></i>';
}
Col_uid = GridColumns[i].uid;
ColumnMenuListHTML += '<li id="li' + Col_uid + '" class="d-flex justify-content-between"><a class="dropdown-item dropdown-toggle">' + CheckBoxType + '<label>' + $(item).text() + '</label></div></a>' + LockSignType + '</li>';
}
}
});
// send html inside the ul element
$("#ColumnSettingsList").html(ColumnMenuListHTML);
// Grid filter areas
var FilterColumnDropdown = "";
$("." + PageName + " #" + GridName + " .k-header").each(function(i, item) {
for (var i = 0; i < GridColumns.length; i++) {
if (GridColumns[i].uid == $(item).attr("id") && GridColumns[i].title != undefined) {
FilterColumnDropdown += '<option value="' + GridColumns[i].field + '">' + GridColumns[i].title + '</option>';
}
}
});
$("#SutunBilsisiList").html(FilterColumnDropdown);
}
// Open/close column settings
function ShowColumnSettingDropdown(id) {
var ColumnSetFirsDD = $("#ColumSettingsFirsDD");
if (ColumnSetFirsDD.hasClass("MenuShow")) {
ColumnSetFirsDD.removeClass('MenuShow');
$("#ColumnSettingsList").removeClass('MenuShow');
$("#FiltreSettingsList").removeClass('MenuShow');
} else {
ColumnSetFirsDD.addClass('MenuShow');
}
}
// Show/hide show/hide settings
function ShowColumShowSetting() {
var ColumnShowSet = $("#ColumnSettingsList");
if (ColumnShowSet.hasClass("MenuShow")) {
ColumnShowSet.removeClass('MenuShow');
} else {
ColumnShowSet.addClass('MenuShow');
$("#FiltreSettingsList").removeClass('MenuShow');
}
}
// Show/hide filter settings
function ShowFilterSetting() {
var Liste = $("#FiltreSettingsList");
if (Liste.hasClass("MenuShow")) {
Liste.removeClass('MenuShow');
} else {
Liste.addClass('MenuShow');
$("#ColumnSettingsList").removeClass('MenuShow');
}
}
// Clear filter areas
function ColumnMenuFiltreTemizle() {
$("#FiltreBirinciAlan").val("");
$("#FiltreIkinciAlan").val("");
}
// Column Menu grid filtering
function ColumnMenuFiltrele() {
// Grid value
var grid = $("#Grid_SipHareketleri_" + SiparisKaydet_SiparisUstIDOku()).data("kendoGrid");
var gridDataSource = grid.dataSource;
var SelectedRow = $("#SutunBilsisiList").val();
var BirinciAlan = $("#FiltreBirinciAlan").val();
var IkinciAlan = $("#FiltreIkinciAlan").val();
var Con1 = $("#ColumnFiltreCond1").val();
var Con2 = $("#ColumnFiltreCond2").val();
var filter = {
logic: Con1,
filters: []
};
var FilterField = SelectedRow;
var filterOperator = Con2;
filter.filters.push({
field: FilterField,
operator: filterOperator,
value: BirinciAlan,
});
filter.filters.push({
field: FilterField,
operator: filterOperator,
value: IkinciAlan,
});
if (BirinciAlan == "" || IkinciAlan == "") {
gridDataSource.filter([]);
} else {
gridDataSource.filter(filter);
}
}
// Lock/unclock Column
function LockUnlockColumn(ColumnID, GridName) {
// ID of Li element
var Li_id = "#li" + ColumnID;
// Grid value
var grid = $("#" + GridName).data("kendoGrid");
// i element that show lock/unlock
var i_el = $(Li_id).children().closest('i');
// Lock or unlock
if (i_el.hasClass("fa-lock")) {
grid.unlockColumn($("#" + ColumnID).data("field"));
i_el.removeClass("fa-lock");
i_el.addClass("fa-unlock");
} else {
grid.lockColumn($("#" + ColumnID).data("field"));
i_el.removeClass("fa-unlock");
i_el.addClass("fa-lock");
}
}
// Show/Hide Column
function ShowHideColumnSet(ColumnID, GridName) {
// Column th element
var id = "#Ch" + ColumnID
// Grid Value
var grid = $("#" + GridName).data("kendoGrid");
// CheckBox
var CheckBoxVal = $(id);
// CheckBox show/hide
if (CheckBoxVal.is(':checked')) {
CheckBoxVal.removeAttr("checked");
// Seçilen satırı gizleme işlemi
grid.hideColumn($("#" + ColumnID).data("field"));
} else {
CheckBoxVal.attr('checked', 'checked');
grid.showColumn($("#" + ColumnID).data("field"));
}
}.ColMenuDropDown {
position: relative;
display: inline-block;
}
#ColumSettingsFirsDD {
display: none;
position: absolute;
z-index: 999;
background-color: #f1f1f1;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
min-width: 110px;
}
#ColumnSettingsList {
position: absolute;
min-width: 250px;
height: 290px;
overflow-y: scroll;
overflow-x: scroll;
right: -253px;
top: 6px;
}
.dropdown-toggle::after {
display: none;
}
.ColumnMenuFiltre {
width: 300px;
padding: 0.5em;
}
.MenuShow {
display: block !important;
}
.cLocked {
font-size: 16pt;
padding: 6px;
}<script src="https://kendo.cdn.telerik.com/2022.3.913/js/kendo.all.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<link href="https://kendo.cdn.telerik.com/2022.3.913/styles/kendo.default-v2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="ColMenuDropDown">
<button id="GorunumAyarlaBtn" type="button" title="Görünüm Ayarla" name="GorunumAyarla" class="btn-primary btn btn-xs btn-default" style="margin-left:2px;" onclick="ShowColumnSettingDropdown();">
<i class="fa fa-clone"></i> Column Menu
</button>
<ul id="ColumSettingsFirsDD">
<li class="dropdown-submenu">
<a id="GorunumColumnMenuBtn" class="dropdown-item dropdown-toggle" href="#" onclick="ShowColumShowSetting();">Columns</a>
<ul id="ColumnSettingsList" class="dropdown-menu">
</ul>
</li>
<li class="dropdown-submenu">
<a id="GorunumFiltreMenuBtn" class="dropdown-item dropdown-toggle" href="#" onclick="ShowFilterSetting();">Filter</a>
<ul id="FiltreSettingsList" class="dropdown-menu">
<li>
<div class="ColumnMenuFiltre">
<span class="text-center"><b>show variables between this and this</b></span>
<div class="row mt-2">
<div class="col-sm-12">
<label>Filtered Column</label>
<select id="SutunBilsisiList" class="form-select">
</select>
</div>
</div>
<div class="row mt-2">
<div class="col-sm-12">
<label>1. Value</label>
<input id="FiltreBirinciAlan" class="form-control form-group-sm" type="text" />
</div>
</div>
<div class="row mt-2">
<div class="col-sm-4">
<select id="ColumnFiltreCond1" class="form-select">
<option value="and">and</option>
<option value="or">or</option>
</select>
</div>
<div class="col-sm-8">
<select id="ColumnFiltreCond2" class="form-select">
<option value="eq">Equal</option>
<option value="neq">Not Equal</option>
<option value="startswith">Starts With</option>
<option value="endswith">Ends With</option>
<option value="contains">Contains</option>
<option value="doesnotcontain">Not Contains</option>
<option value="isnull">Is Null</option>
<option value="isnotnull">Is Not Null</option>
<option value="isempty">Is Empty</option>
<option value="isnotempty">Is Not Empty</option>
<option value="hasnovalue">Has No Value</option>
<option value="hasvalue">Has Value</option>
</select>
</div>
</div>
<div class="row mt-2">
<div class="col-sm-12">
<label>2. Value</label>
<input id="FiltreIkinciAlan" class="form-control form-group-sm" type="text" />
</div>
</div>
<div class="row mt-2 d-flex justify-content-around">
<div class="col-sm-4">
<button type="button" onclick="ColumnMenuFiltrele();" class="btn btn-danger">Filter</button>
</div>
<div class="col-sm-4">
<button type="button" onclick="ColumnMenuFiltreTemizle();" class="btn btn-secondary">Clear</button>
</div>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>相关文章：
- Wordpress标题和子菜单样式对IE的不满
- 按年份和月份折叠帖子标题菜单
- 在聚合物的子菜单标题中添加事件
- 从下拉菜单选项中显示“标题”标签
- 如何在可展开菜单中正确显示标题
- 引导滚动间谍不起作用，导航菜单按钮导致标题重新加载
- 如何创建一个仅在内容上滚动而不在标题上滚动的滚动条菜单
- 激活下拉菜单时动态更改标题的位置
- 在打开(活动）移动下拉菜单时将标题的位置从固定更改为相对
- Dojo:TabContainer-如何在标题中放置菜单按钮
- 如何根据AngularJS中的下拉菜单项更改页面标题
- 从HTML标题和段落创建下拉菜单
- 更改子菜单的href属性'jQuery.menu中的标题
- 删除标题时禁用Highcharts下载菜单
- 标题菜单的高度增加了，但在HTML源代码中什么也没发生
- 可以't将项目添加到标题菜单
- 如何访问剑道网格's列菜单，并为列标题中的特定列添加筛选选项
- 如何为Webix数据表创建自定义标题菜单
- 固定标题-菜单不下降
- 从剑道网格中删除锁定列中的列标题菜单
