在Javascript中从Kendo网格中的列名获取列索引
Posted
技术标签:
【中文标题】在Javascript中从Kendo网格中的列名获取列索引【英文标题】：Get column index from column name in Kendo grid in Javascript 【发布时间】：2016-03-24 13:22:39 【问题描述】：如果我们知道剑道网格中的列名，有没有办法找出网格中列的索引？
例如
EmployeeID| Name
123 | John
我想知道“名称”字段的索引，即网格中的 1。 任何建议。
谢谢。
桑吉夫
【问题讨论】：
你需要索引做什么？您是否尝试编辑/删除？您需要提供更多信息，以便我们提供帮助。 @haakon319 我需要在我的网格中隐藏/显示列。 hideColumn/showColumn 在剑道网格中工作，但性能真的很慢所以我想尝试一下，这个解决方案在这里，它需要列索引。 ***.com/questions/30167893/… 【参考方案1】：请尝试以下代码 sn-p。
<!DOCTYPE html>
<html>
<head>
<title>Jayesh Goyani</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2015.2.902/styles/kendo.common-bootstrap.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2015.2.902/styles/kendo.bootstrap.min.css" />
<script src="https://kendo.cdn.telerik.com/2015.2.902/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2015.2.902/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example"></div>
<input type="text" id="txtColumnName" />
<button onclick="GetColumnIndexFromName();">GetIndex</button>
<script>
$(document).ready(function ()
$("#example").kendoGrid(
dataSource:
type: "odata",
transport:
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
,
pageSize: 20
,
height: 550,
groupable: true,
sortable: true,
pageable:
refresh: true,
pageSizes: true,
buttonCount: 5
,
columns: [
template: "<div class='customer-name'>#: ContactName #</div>",
field: "ContactName",
title: "Contact Name",
width: 240
,
field: "ContactTitle",
title: "Contact Title"
,
field: "CompanyName",
title: "Company Name"
,
field: "Country",
width: 150
]
);
);
function GetColumnIndexFromName()
var index = -1;
var strName = $("#txtColumnName").val();
var grid = $("#example").data("kendoGrid");
var columns = grid.options.columns;
if (columns.length > 0)
for (var i = 0; i < columns.length; i++)
if (columns[i].field == strName) // columns[i].title -- You can also use title property here but for this you have to assign title for all columns
index = i;
if (index == -1)
alert("column name not exists");
else
alert("column index is:- " + index);
</script>
</body>
</html>
如果有任何问题，请告诉我。
【讨论】：
仅供参考：我在这里用你的答案解决了我自己的问题 - ***.com/q/66066772/153923【参考方案2】：这段代码将给出列对象：
var grid = $('#grid').getKendoGrid();
grid.columns.find(function(v, i) return grid.columns[i].field == 'myColumnName'; )
当然，您可以根据需要进一步自定义过滤器。
【讨论】：
这在技术上没有得到列的 index，但它确实得到了实际的列，这是我需要的，而不是索引。grid.columns.findIndex(function(v, i) return grid.columns[i].field == 'myColumnName'; ) 为您提供索引（如果您只需要）【参考方案3】：
因为剑道网格可以有分组列，所以我做了一点改进。应该是递归函数，但她却是：
/**
* Get a column index for a given name
* @param any columnName
*/
function GetColumnIndexFromName(columnName)
var index = -1;
var grid = getKendoGrid();
var columns = grid.options.columns;
if (columns.length > 0)
for (var i = 0; i < columns.length; i++)
if (columns[i].field == columnName) // columns[i].title -- You can also use title property here but for this you have to assign title for all columns
index = i;
// check if the column is grouped
if (columns[i].columns !== undefined && columns[i].columns.length > 0)
for (var j = 0; j < columns[i].columns.length; j++)
if (columns[i].columns[i].field == columnName) // columns[i].title -- You can also use title property here but for this you have to assign title for all columns
index = i + j; // because the column index in a row is not grouped, the counting is continued inside the grouping
if (index !== -1)
return index;
return index;
用法：GetColumnIndexFromName('');
【讨论】：
以上是关于在Javascript中从Kendo网格中的列名获取列索引的主要内容，如果未能解决你的问题，请参考以下文章
如何在 Kendo UI MVC 的网格中设置和获取下拉列表的值？