在Javascript中从Kendo网格中的列名获取列索引答案

【问题标题】：Get column index from column name in Kendo grid in Javascript在Javascript中从Kendo网格中的列名获取列索引
【发布时间】：2016-03-24 13:22:39
【问题描述】：

如果我们知道剑道网格中的列名，有没有办法找出网格中列的索引？

例如

EmployeeID| Name
123       | John

我想知道“名称”字段的索引，即网格中的 1。任何建议。

谢谢。

桑吉夫

【问题讨论】：

你需要索引做什么？您是否尝试编辑/删除？您需要提供更多信息，以便我们提供帮助。
@haakon319 我需要在我的网格中隐藏/显示列。 hideColumn/showColumn 在剑道网格中工作，但性能真的很慢所以我想尝试一下，这个解决方案在这里，它需要列索引。 stackoverflow.com/questions/30167893/…

标签： javascript kendo-ui telerik kendo-grid telerik-grid

【解决方案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>

如果有任何问题，请告诉我。

【讨论】：

仅供参考：我在这里用你的答案解决了我自己的问题 - stackoverflow.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('');

【讨论】：