隐藏列的jQuery或JS

已经有一段时间的研究，试图掩盖一个剑道格表隐藏列的jQuery或JS

指定列使用此

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

只能隐藏header..but不整列，仍需要帮助！

来源

2012-10-19 cool_spirit

尝试这种情况：

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

剑道UI网格表显然分解成这样的结构：

<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元素中，因此需要两个选择器才能获得他们俩。

来源

2012-10-20 00:09:18 pete

只能隐藏标题，而不是整个列。 –

@cool_spirit：如果你去http://demos.kendoui.com/web/grid/index.html并运行'$（'＃grid div.k-grid-header-wrap th：nth-child（4），#grid div.k-grid-content td：nth-child（4）'）。toggle（）;'在控制台中，**整个**“标题”列（包括标题单元格）**将* *切换（实际上，在将我的答案包括在内之前，我是如何测试上述代码的）。 – pete

这里有个奇怪的地方，我尝试了很多方法，假设它们是在逻辑中工作的，事实上它不能工作，真的让它感到沮丧 –

假设#grid已绑定的剑道网格，您可以使用hideColumn function：

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

这将隐藏两个头和数据列。当您需要显示该列时，还有一个showColumn function。

来源

2012-10-20 06:40:02

清洁，简单，并使用kendo的内置API。也参考API。 +1为一个伟大的答案！ – pete

完美。整洁而简单。 –

根据屏幕大小显示或隐藏特定列。
当屏幕比X小时，表达式为真。

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

（在列部分定义）

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

来源

2013-11-11 13:05:30 chris

隐藏列的jQuery或JS

回答

相关问题