Kendo UI 网格：从 HTML table 初始化时隐藏列？

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 table，如何指定要隐藏的列？我需要在 JS 中访问该列的数据，但不想让最终用户看到该数据。

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

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

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

Answer 1

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

相关引用：

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

All attributes should be applied to the <th> elements, except the column width styles.

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 这是对 kendo.

中声明式启动的一个很好的概述

http://www.telerik.com/forums/declarative-initialization-of-the-kendo-ui-grid 这个 post 是特定于网格的声明性初始化的一个很好的例子

话虽如此，如果您认真地使用普通的旧 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,output

Answer 2

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

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

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

Kendo UI 网格：从 HTML table 初始化时隐藏列？

Kendo UI Grid: Hide column when initialize from HTML table?

kendo-ui

kendo-grid

kendo-ui-grid