使用jquery或js隱藏kendo ui中的列

Question

經過一段時間的研究，嘗試在kendo網格表中隱藏一個指定列

用這個

 $('#grid .k-grid-content table tr td:nth-child(8),th:nth-child(8)').toggle();

沒有任何幫助，任何人都有想法？

我要隱藏的列綁定到

              { 
                field: "CreatedDate",
                width: 20,
                title: "Create Date",
                type: 'date',

                template: '#= kendo.toString(CreatedDate,"MM/dd/yyyy") #'
            }

[編輯]

$('#grid div.k-grid-header-wrap th:nth-child(4)').toggle()
$('#grid div.k-grid-content td:nth-child(4)').toggle()

只能隱藏標題..但不是整列，還需要幫助！

Answer 1

假設#grid已綁定為kendo網格，則可以使用hideColumn函數 ：

var grid = $("#grid").data("kendoGrid");
grid.hideColumn("CreatedDate");

這將隱藏標題和數據列。 當您還需要顯示列時，還有一個showColumn函數 。

Answer 2

我根據屏幕大小顯示或隱藏特定列。
當屏幕小於X時，表達式為真。

   hidden: ($(window).width() < 1350)

（在列部分中定義）

columns: [{
    field:  "Answers",
    title:  "Answers",
    width:  35,
    hidden: ($(window).width() < 1350)
},{
    ...

Answer 3

嘗試這個：

$('#grid div.k-grid-header-wrap th:nth-child(4)').toggle();
$('#grid div.k-grid-content td:nth-child(4)').toggle();

或（組合成一個選擇器）：

$('#grid div.k-grid-header-wrap th:nth-child(4), #grid div.k-grid-content td:nth-child(4)').toggle();

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>

由於表頭和表體位於不同的div元素中，因此需要兩個選擇器來獲取它們。