4

しばらく研究して、剣道グリッドテーブルの特定の列を非表示にしてみてください

これを使って

 $('#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()

ヘッダーのみを非表示にできますが、列全体を非表示にすることはできません。まだ助けが必要です!

4

3 に答える 3

27

#grid がすでに剣道グリッドとしてバインドされていると仮定すると、hideColumn 関数を使用できます。

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

これにより、ヘッダーとデータ列の両方が非表示になります。列も表示する必要がある場合は、showColumn 関数もあります。

于 2012-10-20T06:40:02.777 に答える
1

画面サイズに応じて特定の列を表示または非表示にします。
画面が X のように小さい場合、式は true になります。

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

(列セクションで定義)

columns: [{
    field:  "Answers",
    title:  "Answers",
    width:  35,
    hidden: ($(window).width() < 1350)
},{
    ...
于 2013-11-11T13:05:30.647 に答える
1

これを試して：

$('#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要素にあるため、両方を取得するには 2 つのセレクターが必要です。

于 2012-10-20T00:09:18.723 に答える