如何隐藏Kendo UI网格中的列

我正在研究HTML5和JavaScript网站。

是否有可能在Kendo UI Grid中有一个隐藏的列，并使用JQuery访问这个值？

Answer 1

使用JavaScript

请参阅Kendo UI API参考 。

在网格定义期间隐藏一列

使用JavaScript实现可以添加hidden: true ：

 $("#gridName").kendoGrid({ columns: [ { hidden: true, field: "id" }, { field: "name" } ], dataSource: [ { id: 1, name: "Jane Doe" }, { id: 2, name: "John Doe" } ] }); 

通过CSSselect器隐藏一列

 $("#gridName").find("table th").eq(1).hide(); 

按列索引隐藏一列

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

按列名称隐藏一列

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

按列对象引用隐藏列

 var grid = $("#gridName").data("kendoGrid"); grid.hideColumn(grid.columns[0].columns[1]); 

使用ASP.NET MVC

请参阅Kendo MVC API参考

在网格定义期间隐藏一列

 @(Html.Kendo().Grid<Something>() .Name("GridName") .Columns(columns => { columns.Bound(m => m.Id).Hidden() columns.Bound(m => m.Name) }) ) 

使用PHP

请参阅Kendo UI以获取PHP API参考

在网格定义期间隐藏一列

 <?php $column = new \Kendo\UI\GridColumn(); $column->hidden(true); ?> 

Answer 2

正如@尼克说有隐藏列的多种方式，但我会假设你使用KendoUI的方法来隐藏它。 即：设置hidden hideColumn true或以编程方式调用hideColumn 。

如果是这样的话，你应该记住，你的模型可能有不显示或甚至没有映射到列的字段，但它们存在，你仍然可以访问它们。

如果我们有以下网格定义：

 var grid = $("#grid").kendoGrid({ dataSource: ds, selectable: true, ... columns : [ { field: "Id", hidden: true }, { field: "FirstName", width: 90, title: "First Name" }, { field: "LastName", width: 200, title: "Last Name" } ] }).data("kendoGrid"); 

我在哪里声明了一个列Id隐藏。 我仍然可以通过使用以下模式访问Id的值：

 // I want to access the Id for row 3 var row = $("tr:eq(3)", "#grid"); // Retrieve the item from the grid using dataItem method var item = $("#grid").data("kendoGrid").dataItem(row); // Show Id alert("Id is " + item.Id); 

可运行的例子

 var grid = $("#grid").kendoGrid({ dataSource: [ { Id: 1, FirstName: "John", LastName: "Smith" }, { Id: 2, FirstName: "Jane", LastName: "Smith" }, { Id: 3, FirstName: "Jack", LastName: "Smith" }, { Id: 4, FirstName: "Joseph", LastName: "Smith" }, { Id: 5, FirstName: "Jeff", LastName: "Smith" }, ], selectable: true, columns : [ { field: "Id", hidden: true }, { field: "FirstName", width: 90, title: "First Name" }, { field: "LastName", width: 200, title: "Last Name" } ] }).data("kendoGrid"); $("#show").on("click", function(e) { var row = grid.select(); if (row) { var item = grid.dataItem(row); alert ("The ID is :" + item.Id); } else { alert("Select a row"); } }); 

 #grid { width : 490px; } 

 <link href="2014.2.903/styles/kendo.common.min.css" rel="stylesheet" /> <link href="http://cdn.kendostatic.com/2014.2.903/styles/kendo.default.min.css" rel="stylesheet" /> <script src="http://cdn.kendostatic.com/2014.2.903/js/jquery.min.js"></script> <script src="http://cdn.kendostatic.com/2014.2.903/js/kendo.all.min.js"></script> Select row and click <button id="show" class="k-button">Here</button> to show hidden Id. <div id="grid"></div>