javascript 使用Javascript从Kendo网格中的列名获取列索引

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/34345363/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-28 17:35:41  来源:igfitidea点击:

Get column index from column name in Kendo grid in Javascript

javascriptkendo-uitelerikkendo-gridtelerik-grid

提问by sanjeev40084

Is there a way we can find out the index of column in grid, if we know the column name in Kendo grid?

如果我们知道 Kendo 网格中的列名,有没有办法找出网格中列的索引?

e.g.

例如

EmployeeID| Name
123       | John

I want to know the index of 'Name' field i.e. 1 in the grid. Any suggestions.

我想知道“名称”字段的索引,即网格中的 1。有什么建议。

Thanks.

谢谢。

Sanjeev

桑吉夫

回答by Jayesh Goyani

Please try with the below code snippet.

请尝试使用以下代码片段。

<!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>

Let me know if any concern.

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

回答by Cristian Oprea

This code will give the column object:

此代码将提供列对象:

var grid = $('#grid').getKendoGrid();
grid.columns.find(function(v, i) { return grid.columns[i].field == 'myColumnName'; })

Of course you can customize the filter further if you want.

当然,您可以根据需要进一步自定义过滤器。