如何使用JavaScript,React,Angular,Vue或 ASP.NET MVC隐藏Kendo UI网格列
How Can I Hide Kendo UI Grid Columns using JavaScript, React, Angular, Vue or ASP.NET MVC
我正在开发HTML5和JavaScript网站。
是否可以在剑道UI网格中有一个隐藏列并使用JQuery访问该值?
使用 JavaScript
请参阅剑道 UI API 参考。
在网格定义期间隐藏列
您可以添加hidden: true
:
$("#gridName").kendoGrid({
columns: [
{ hidden: true, field: "id" },
{ field: "name" }
],
dataSource: [ { id: 1, name: "Jane Doe" }, { id: 2, name: "John Doe" } ]
});
通过 css 选择器隐藏列
$("#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]);
使用 React
请参阅 Kendo UI for React API 参考
在网格定义期间隐藏列
您可以设置show: false
:
class App extends React.Component {
columns = [
{
title: 'Product Id',
field: 'ProductID',
show: false
},
{
title: 'Product Name',
field: 'ProductName',
show: true
},
{
title: 'Unit Price',
field: 'UnitPrice',
show: true
}
]
constructor() {
super();
this.state = {
columns: this.columns,
show:false
};
}
render() {
return (
<div>
<Grid data={products} >
{this.state.columns.map((column, idx) =>
column.show && (<Column key={idx} field={column.field} title={column.title} />)
)}
</Grid>
</div>
);
}
}
使用 Angular
请参阅 Kendo UI 了解 Angular API 参考
在网格定义期间隐藏列
您可以添加[hidden]="true"
@Component({
selector: 'my-app',
template: `
<kendo-grid [data]="gridData" [scrollable]="scrollable" style="height: 200px">
<kendo-grid-column [hidden]="true" field="ID" width="120">
</kendo-grid-column>
<kendo-grid-column field="ProductName" title="Product Name" width="200">
</kendo-grid-column>
<kendo-grid-column field="UnitPrice" title="Unit Price" width="230">
</kendo-grid-column>
</kendo-grid>
`
})
以编程方式隐藏列
@Component({
selector: 'my-app',
template: `
<div class="example-config">
<button (click)="restoreColumns()" class="k-button">Restore hidden columns</button>
</div>
<kendo-grid [data]="gridData" style="height:400px">
<ng-template ngFor [ngForOf]="columns" let-column>
<kendo-grid-column field="{{column}}" [hidden]="hiddenColumns.indexOf(column) > -1" >
<ng-template kendoGridHeaderTemplate let-dataItem>
{{dataItem.field}}
<button (click)="hideColumn(dataItem.field)" class="k-button k-primary" style="float: right;">
Hide
</button>
</ng-template>
</kendo-grid-column>
</ng-template>
</kendo-grid>
`
})
export class AppComponent {
public gridData: any[] = sampleCustomers;
public columns: string[] = [ 'CompanyName', 'ContactName', 'ContactTitle' ];
public hiddenColumns: string[] = [];
public restoreColumns(): void {
this.hiddenColumns = [];
}
public hideColumn(field: string): void {
this.hiddenColumns.push(field);
}
}
使用 Vue
请参阅 剑道 UI 的 Vue API 参考
在网格定义期间隐藏列
您可以添加:hidden="true"
<kendo-grid :height="600"
:data-source-ref="'datasource1'"
:pageable='true'>
<kendo-grid-column field="ProductID" :hidden="true"></kendo-grid-column>
<kendo-grid-column field="ProductName"></kendo-grid-column>
<kendo-grid-column field="UnitPrice" title="Unit Price" :width="120" :format="'{0:c}'"></kendo-grid-column>
<kendo-grid-column field="UnitsInStock" title="Units In Stock" :width="120"></kendo-grid-column>
</kendo-grid>
使用 ASP.NET MVC
请参阅剑道 MVC API 参考
在网格定义期间隐藏列
@(Html.Kendo().Grid<Something>()
.Name("GridName")
.Columns(columns =>
{
columns.Bound(m => m.Id).Hidden()
columns.Bound(m => m.Name)
})
)
使用 PHP
请参阅 PHP API 的剑道 UI 参考
在网格定义期间隐藏列
<?php
$column = new 'Kendo'UI'GridColumn();
$column->hidden(true);
?>
正如@Nic所说,有多种隐藏列的方法,但我假设您正在使用 KendoUI 方法来隐藏它。即:将列hidden
设置为 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="http://cdn.kendostatic.com/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>
相关文章:
- 在mvc应用程序中,在回发时保留最初隐藏的文本框的隐藏或可见状态
- MVC+访问控制器中的隐藏字段
- 为各种模型动态创建隐藏的表单字段(MVC 4)
- 在MVC中使用jQuery传递隐藏值
- MVC 5防止隐藏字段的必需字段验证
- 基于下拉选择显示/隐藏控件mvc 4 razor c#
- 使用 jQuery 在 MVC 中隐藏或显示基于 DDL 选择的表单控件
- MVC ASP.Net Javascript - 如果 Url 没有 id,如何使用 javascript 函数隐藏按钮
- 如何通过MVC操作方法显示/隐藏HTML按钮
- asp.net MVC 隐藏字段 ID 问题
- ASP MVC:选中复选框值并选中复选框时获取隐藏的输入总和
- 如何隐藏传说中的所有年份,除了剑道图Mvc中的最后一年
- 如何使用JavaScript,React,Angular,Vue或 ASP.NET MVC隐藏Kendo UI网格列
- 如何根据索引中控件的onchange事件设置mvc 5视图中隐藏字段的值
- 如何在MVC中隐藏警报消息
- chart.js如果没有数据,隐藏空图表并保留以前的数据.net MVC
- 如何在MVC 4中使用jquery验证表单的隐藏输入字段
- 在mvc中使用javascript隐藏和显示菜单
- Kendo UI ASP.NET MVC-网格-使用JavaScript隐藏复选框
- 在javascript中隐藏MVC远程网格列会导致对齐问题