从 Kendo 网格中的列名获取列索引 Javascript
Get column index from column name in Kendo grid in Javascript
如果我们知道 Kendo 网格中的列名,是否有办法找出网格中列的索引?
例如
EmployeeID| Name
123 | John
我想知道 'Name' 字段的索引,即网格中的 1。
任何建议。
谢谢。
桑吉夫
请尝试使用以下代码片段。
<!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>
如有任何疑问,请告诉我。
此代码将给出列对象:
var grid = $('#grid').getKendoGrid();
grid.columns.find(function(v, i) { return grid.columns[i].field == 'myColumnName'; })
当然,您可以根据需要进一步自定义过滤器。
因为kendo网格可以有分组的列,我做了一点改进。应该是递归函数,但是她却是:
/**
* 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('');
如果我们知道 Kendo 网格中的列名,是否有办法找出网格中列的索引?
例如
EmployeeID| Name
123 | John
我想知道 'Name' 字段的索引,即网格中的 1。 任何建议。
谢谢。
桑吉夫
请尝试使用以下代码片段。
<!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>
如有任何疑问,请告诉我。
此代码将给出列对象:
var grid = $('#grid').getKendoGrid();
grid.columns.find(function(v, i) { return grid.columns[i].field == 'myColumnName'; })
当然,您可以根据需要进一步自定义过滤器。
因为kendo网格可以有分组的列,我做了一点改进。应该是递归函数,但是她却是:
/**
* 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('');