Kendo UI Grid:从HTML表初始化时隐藏列吗? [英] Kendo UI Grid: Hide column when initialize from HTML table?
问题描述
$(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>
从HTML表初始化，如何指定要隐藏的列?我需要访问JS中该列的数据，但不想让最终用户看到该数据.
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/从表中
我试图在th标签上使用属性:data-hidden ="true"(数据字段也在th标签上，就像在演示中一样)，但是它不起作用.
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.
请注意，如果可能的话，我希望能够将hidden选项指定为html属性.
Note, I'd like to be able to specify the hidden option as an html attribute, if possible.
推荐答案
不幸的是，从HTML表初始化时，您不能使用hidden属性: http://docs.telerik.com/kendo-ui/web/grid/introduction#create-a-grid-from-an-existing-html-table
unfortunately you can't use the attribute hidden when initializing from an HTML table: http://docs.telerik.com/kendo-ui/web/grid/introduction#create-a-grid-from-an-existing-html-table
相关报价:
从现有表创建网格时，以下列 可以通过HTML属性定义设置:
When creating the Grid from an existing table, the following column settings can be defined via HTML attributes:
- 通过数据字段属性的数据字段名称
- 通过应用于各个元素的宽度样式的列宽
- 通过数据类型属性定义数据类型
- 通过数据模板属性定义列模板
- 通过数据菜单属性启用或禁用列菜单
- 通过数据可排序属性启用或禁用排序
- 通过可数据过滤的属性启用或禁用过滤
- 通过可数据分组的属性启用或禁用分组
- data field names via data-field attributes
- column widths via width styles applied to the respective elements
- define data type via data-type attributes
- define a column template via data-template attributes
- enable or disable the column menu via data-menu attributes
- enable or disable sorting via data-sortable attributes
- enable or disable filtering via data-filterable attributes
- enable or disable grouping via data-groupable attributes
所有属性都应应用于<th>元素，但列宽样式除外.
All attributes should be applied to the <th> elements, except the column width styles.
无法通过<table>中的HTML属性定义所有其他与列相关的设置.如果必须使用此类设置(例如命令，锁定，编辑器等)，则应放弃上述属性配置，并且所有设置应包含在Grid的Javascript初始化语句中(使用声明性小部件初始化时，应设置列属性)通过data-columns属性).
All other column-related settings cannot be defined via HTML attributes in the <table>. If such settings must be used (e.g. commands, locking, editors, etc.) then the above attribute configuration should be abandoned and all settings should be included in the Grid's Javascript initialization statement (when using declarative widget initialization, the column properties should be set via the data-columns attribute).
有关此的更多信息: http://www.telerik.com/blogs/mvvm_declarative_initialization_and_html5_data_attributes 这是对剑道中声明式初始化的很好概述.
For more info on that: http://www.telerik.com/blogs/mvvm_declarative_initialization_and_html5_data_attributes This is a good overview of declarative initiation in kendo.
http://www.telerik.com/论坛/kendo-ui-grid的声明式初始化 这篇文章是特定于网格的声明式初始化的一个很好的例子
http://www.telerik.com/forums/declarative-initialization-of-the-kendo-ui-grid This post is a good example of declaritive initialization specific to grids
话虽如此，如果您已经认真地习惯了普通的旧HTML格式，这是一个快速而肮脏的解决方法(这将使您可以通过data属性设置hidden，而不是隐藏单个列-可能会或可能不会对您很重要):
With that being said, Here's a quick and dirty workaround if you are seriously married to the plain old HTML format (this would allow you to set hidden via a data attribute, rather than hiding individual columns--which may or may not be important to you):
$(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"));
}
}
});
http://jsbin.com/mapadu/edit?html,js,output
这篇关于Kendo UI Grid:从HTML表初始化时隐藏列吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
