隐藏和显示列-剑道网格 [英] hide and show columns- kendo grid
本文介绍了隐藏和显示列-剑道网格的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
如何在不使用jquery的情况下隐藏和显示kendo网格的列? 这是示例的js小提琴链接: http://jsfiddle.net/tmLmk/7/
How to hide and show columns of kendo grid without using jquery? here is the js fiddle link for the example: http://jsfiddle.net/tmLmk/7/
HTML代码:
<div ng-controller="GridController">
<div kendo-grid k-options="options" k-data-source="sData"></div>
</div>
JS代码:
angular.module('angular-kendo-example', ['kendo.directives']);
function GridController($scope) {
$scope.options = {
sortable: true,
pageable: true,
columns: [{
field: "column1",
title: "column 1",
width: "40px"
},{
field: "column2",
title: "column 2",
width: "70px"
},{
field: "column3",
title: "column 3",
width: "70px"
},{
field: "column4",
title: "column 4",
width: "60px"
},{
field: "column5",
title: "column 5",
width: "40px"
},{
field: "column6",
title: "column 6",
width: "40px"
}],
};
$scope.sData= [
{ column1: "column1 data", column2: "column2 data", column3: "column3 data", column4: "column4 data", column5: "column5 data", column6: "column6 data" }, { column1: "column1 data", column2: "column2 data", column3: "column3 data", column4: "column4 data", column5: "column5 data", column6: "column6 data" }, { column1: "column1 data", column2: "column2 data", column3: "column3 data", column4: "column4 data", column5: "column5 data", column6: "column6 data" }
];
}
谢谢.
推荐答案
如果添加
columnMenu = true,
columnMenu = true,
在列声明之前,这将为您提供列菜单,该菜单应启用显示和隐藏列选项.
Before the columns declaration this should give you the column menu which should enable the show and hide columns options.
此链接应该有帮助
http://demos.telerik.com/kendo-ui/grid/列菜单
这篇关于隐藏和显示列-剑道网格的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文