kendo-ui - Kendo UI Grid：从 HTML 表初始化时隐藏列？

Question

                $(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 中该列的数据，但不想让最终用户看到该数据。

http://demos.telerik.com/kendo-ui/grid/from-table

我尝试在 th 标签上使用属性： data-hidden="true" （数据字段也在 th 标签上，就像在演示中一样），但它不起作用。

请注意，如果可能的话，我希望能够将隐藏选项指定为 html 属性。

Answer 1

不幸的是，从 HTML 表初始化时，您不能使用隐藏的属性：http: //docs.telerik.com/kendo-ui/web/grid/introduction#create-a-grid-from-an-existing-html-桌子

相关报价：

从现有表创建网格时，可以通过 HTML 属性定义以下列设置：

• 通过数据字段属性的数据字段名称
• 通过应用于相应元素的宽度样式的列宽
• 通过数据类型属性定义数据类型
• 通过数据模板属性定义列模板
• 通过数据菜单属性启用或禁用列菜单
• 通过数据可排序属性启用或禁用排序
• 通过数据过滤属性启用或禁用过滤
• 通过 data-groupable 属性启用或禁用分组

<th>除列宽样式外，所有属性都应应用于元素。

所有其他与列相关的设置都不能通过<table>. 如果必须使用此类设置（例如命令、锁定、编辑器等），则应放弃上述属性配置，并将所有设置包含在 Grid 的 Javascript 初始化语句中（使用声明式小部件初始化时，应设置列属性通过数据列属性）。

有关这方面的更多信息： 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"));
    }
  }
});

http://jsbin.com/mapadu/edit?html,js,输出

Answer 2

您可以在小部件初始化后隐藏列。使用数据字段字符串

<script>
       $(document).ready(function() {
           $("#grid").kendoGrid({
               height: 550,
               sortable: true                            
           });
           var grid = $("#grid").data("kendoGrid");
           grid.hideColumn("airconditioner");
       });
</script>

这是一个工作演示，但用户始终可以检查页面的来源并查看数据，因为这仅将样式设置<td>为display:none