$(document).ready(function() {
$("#grid").kendoGrid({
height: 550,
sortable: true
});
});<link href="http://kendo.cdn.telerik.com/2014.1.318/styles/kendo.common.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2014.1.318/js/kendo.all.min.js"></script>
<div id="example">
<table id="grid">
<colgroup>
<col />
<col />
<col />
<col />
<col />
</colgroup>
<thead>
<tr>
<th data-field="make" data-hidden="true">Car Make</th>
<th data-field="model">Car Model</th>
<th data-field="year">Year</th>
<th data-field="category">Category</th>
<th data-field="airconditioner">Air Conditioner</th>
</tr>
</thead>
<tbody>
<tr>
<td>Volvo</td>
<td>S60</td>
<td>2010</td>
<td>Saloon</td>
<td>Yes</td>
</tr>
<tr>
<td>Audi</td>
<td>A4</td>
<td>2002</td>
<td>Saloon</td>
<td>Yes</td>
</tr>
<tr>
<td>BMW</td>
<td>535d</td>
<td>2006</td>
<td>Saloon</td>
<td>Yes</td>
</tr>
<tr>
<td>BMW</td>
<td>320d</td>
<td>2006</td>
<td>Saloon</td>
<td>No</td>
</tr>
<tr>
<td>VW</td>
<td>Passat</td>
<td>2007</td>
<td>Saloon</td>
<td>No</td>
</tr>
<tr>
<td>VW</td>
<td>Passat</td>
<td>2008</td>
<td>Saloon</td>
<td>Yes</td>
</tr>
<tr>
<td>Peugeot</td>
<td>407</td>
<td>2006</td>
<td>Saloon</td>
<td>Yes</td>
</tr>
<tr>
<td>Honda</td>
<td>Accord</td>
<td>2008</td>
<td>Saloon</td>
<td>No</td>
</tr>
<tr>
<td>Alfa Romeo</td>
<td>159</td>
<td>2008</td>
<td>Saloon</td>
<td>No</td>
</tr>
<tr>
<td>Nissan</td>
<td>Almera</td>
<td>2001</td>
<td>Saloon</td>
<td>Yes</td>
</tr>
<tr>
<td>Mitsubishi</td>
<td>Lancer</td>
<td>2008</td>
<td>Saloon</td>
<td>Yes</td>
</tr>
<tr>
<td>Opel</td>
<td>Vectra</td>
<td>2008</td>
<td>Saloon</td>
<td>Yes</td>
</tr>
<tr>
<td>Toyota</td>
<td>Avensis</td>
<td>2006</td>
<td>Saloon</td>
<td>No</td>
</tr>
<tr>
<td>Toyota</td>
<td>Avensis</td>
<td>2008</td>
<td>Saloon</td>
<td>Yes</td>
</tr>
<tr>
<td>Toyota</td>
<td>Avensis</td>
<td>2008</td>
<td>Saloon</td>
<td>Yes</td>
</tr>
<tr>
<td>Audi</td>
<td>Q7</td>
<td>2007</td>
<td>SUV</td>
<td>Yes</td>
</tr>
<tr>
<td>Hyundai</td>
<td>Santa Fe</td>
<td>2012</td>
<td>SUV</td>
<td>Yes</td>
</tr>
<tr>
<td>Hyundai</td>
<td>Santa Fe</td>
<td>2013</td>
<td>SUV</td>
<td>Yes</td>
</tr>
<tr>
<td>Nissan</td>
<td>Qashqai</td>
<td>2007</td>
<td>SUV</td>
<td>Yes</td>
</tr>
<tr>
<td>Mercedez</td>
<td>B Class</td>
<td>2007</td>
<td>Hatchback</td>
<td>Yes</td>
</tr>
<tr>
<td>Lancia</td>
<td>Ypsilon</td>
<td>2006</td>
<td>Hatchback</td>
<td>Yes</td>
</tr>
</tbody>
</table>
</div>Initializing from HTML table, how can I specify a column to be hidden? I need to access the data for that column in JS, but don't want to have that data visible to the end user.
http://demos.telerik.com/kendo-ui/grid/from-table
I've tried to use the attribute: data-hidden="true" on the th tag (data-field is also on th tag, as it is in the demo), but it's not working.
Note, I'd like to be able to specify the hidden option as an html attribute, if possible.
答案 0 :(得分：4)
遗憾的是，从HTML表初始化时，您无法使用隐藏的属性： http://docs.telerik.com/kendo-ui/web/grid/introduction#create-a-grid-from-an-existing-html-table
相关引用：
从现有表格创建网格时，请执行以下列 设置可以通过HTML属性定义：
- 数据字段名称通过数据字段属性
- 通过应用于各个元素的宽度样式的列宽
- 通过数据类型属性定义数据类型
- 通过数据模板属性定义列模板
- 通过数据菜单属性启用或禁用列菜单
- 通过数据可排序属性启用或禁用排序
- 通过数据可过滤属性启用或禁用过滤
- 通过数据可分组属性启用或禁用分组
除了列宽样式之外，所有属性都应该应用于
<th>元素。无法通过
<table>中的HTML属性定义所有其他与列相关的设置。如果必须使用此类设置（例如命令，锁定，编辑器等），则应放弃上述属性配置，并且所有设置都应包含在Grid的Javascript初始化语句中（使用声明性窗口小部件初始化时，应设置列属性）通过data-columns属性）。
有关更多信息： http://www.telerik.com/blogs/mvvm_declarative_initialization_and_html5_data_attributes 这是对剑道中声明性启动的一个很好的概述。
http://www.telerik.com/forums/declarative-initialization-of-the-kendo-ui-grid 这篇文章是特定于网格
的声明初始化的一个很好的例子话虽如此，如果您认真地与普通的旧HTML格式结合，这是一个快速而肮脏的解决方法（这将允许您通过数据属性设置隐藏，而不是隐藏单个列 - 可能会也可能不会对你很重要）：
$(document).ready(function() {
var columns = $('#grid th'),
grid = $("#grid").kendoGrid({
height: 550,
sortable: true
}).data("kendoGrid");
for(var i =0; i < columns.length; i++){
if($(columns[i]).data("hidden") === true){
grid.hideColumn($(columns[i]).data("field"));
}
}
});
答案 1 :(得分：2)
您可以在窗口小部件初始化后隐藏列。使用数据字段字符串
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
height: 550,
sortable: true
});
var grid = $("#grid").data("kendoGrid");
grid.hideColumn("airconditioner");
});
</script>
Here是一个有效的演示，但用户可以随时查看页面来源并查看数据，因为这只会将<td>的样式设置为display:none