javascript 使用 jquery 或 js 在 kendo ui 中隐藏列
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12983872/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Hide column in kendo ui using jquery or js
提问by cool_spirit
Been a while research, try to hide one specify column in kendo grid table
经过一段时间的研究，尝试在剑道网格表中隐藏一个指定列
using this
使用这个
$('#grid .k-grid-content table tr td:nth-child(8),th:nth-child(8)').toggle();
with no help, anyone has ideas?
没有帮助，有人有想法吗？
The column I want to hide bind to
我想隐藏绑定到的列
{
field: "CreatedDate",
width: 20,
title: "Create Date",
type: 'date',
template: '#= kendo.toString(CreatedDate,"MM/dd/yyyy") #'
}
[edited]
[编辑]
$('#grid div.k-grid-header-wrap th:nth-child(4)').toggle()
$('#grid div.k-grid-content td:nth-child(4)').toggle()
can only hide the header..but not the whole column, still need help!
只能隐藏标题..但不能隐藏整个列，仍然需要帮助！
采纳答案by pete
Try this:
试试这个：
$('#grid div.k-grid-header-wrap th:nth-child(4)').toggle();
$('#grid div.k-grid-content td:nth-child(4)').toggle();
or (combined into a single selector):
或（组合成一个选择器）：
$('#grid div.k-grid-header-wrap th:nth-child(4), #grid div.k-grid-content td:nth-child(4)').toggle();
Kendo UI Grid apparently breaks up the table into a structure like this:
Kendo UI Grid 显然将表格分解为如下结构：
<div id="grid">
<div class="k-grouping-header"></div>
<div class="k-grid-header">
<div class="k-grid-header-wrap">
<table cellspacing="0">
<colgroup>
<col />
</colgroup>
<thead>
<tr>
<th></th>
</tr>
</thead>
</table>
</div>
</div>
<div class="k-grid-content">
<table class="k-focusable" cellspacing="0">
<colgroup>
<col />
</colgroup>
<tbody>
<tr data-uid="5f65ad8c-601d-4700-a176-23be2d33fc76">
<td></td>
</tr>
</tbody>
</table>
</div>
<div class="k-pager-wrap k-grid-pager k-widget" data-role="pager">
</div>
</div>
As the table header and table body are in different divelements, you need two selectors to get them both.
由于表头和表体位于不同的div元素中，您需要两个选择器来获取它们。
回答by Bill Hayden
Assuming #grid is already bound as the kendo grid, you can use the hideColumn function:
假设 #grid 已经绑定为剑道网格，您可以使用hideColumn 函数：
var grid = $("#grid").data("kendoGrid");
grid.hideColumn("CreatedDate");
This will hide both the header and data column. There is also a showColumn functionwhen you need to show the column as well.
这将隐藏标题和数据列。当您还需要显示列时，还有一个showColumn 函数。
回答by chris
I show or hide a specific column depending on the screensize.
When the screen is smaller as X, the expression gives true.
我根据屏幕大小显示或隐藏特定列。
当屏幕小于 X 时，表达式为真。
hidden: ($(window).width() < 1350)
(Define in the columns section)
（在列部分定义）
columns: [{
field: "Answers",
title: "Answers",
width: 35,
hidden: ($(window).width() < 1350)
},{
...
