Kendo UI showColumn 多栏

Question

我正在使用 showColumn 和 hideColumn 来显示和隐藏 Kendo UI 网格中的列。 但是，现在添加了多列标题，我只能隐藏和显示顶级标题。

这是一个js的例子：

$('#data-plan').click(function () { $('#data-plan').find('i').toggleClass('显示隐藏'); var grid = $("#lpdatagrid").data("kendoGrid"); var col = 0; 如果（grid.columns[col].hidden）{ grid.showColumn(+col); } 别的 { grid.hideColumn(+col); } });

使用“0”显示/隐藏多列标题的第一级列。我可以用 showColumn 和 hideColumn 调用的二级标题的列“数字”是什么？

我为糟糕的代码道歉。我不是开发人员。

Answer 1

您可以在要显示/隐藏的列中使用field 的名称。假设您有一个 Grid 有一个 Country 列，在 Location 下分组，在 Contact Info 下，类似于：

        columns: [
          {
            field: "CompanyName",
            title: "Company Name"
          },
          {
            title: "Contact Info",
            columns: [
              {
                field: "ContactTitle",
                title: "Contact Title"
              },
              {
                field: "ContactName",
                title: "Contact Name"
              },
              {
                title: "Location",
                columns: [ 
                  { field: "Country" },
                  { field: "City" }
                ]
              },
              {
                field: "Phone",
                title: "Phone"
              }
            ]
          }
        ]

那么你可以使用：

        var grid = $("#grid").data("kendoGrid");
        // Get the "Country" column that is
        var col = grid.columns[1].columns[2].columns[0];
        // Check if it is visible or hidden
        if (col.hidden) {
          grid.showColumn(col.field); // or directly grid.showColumn("Country");
        } else {
          grid.hideColumn(col.field); // or directly grid.hideColumn("Country");
        } 

$(document).ready(function() {
  $("#grid").kendoGrid({
    dataSource: {
      type: "odata",
      transport: {
        read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
      },
      pageSize: 20
    },
    height: 300,
    pageable: true,
    columns: [
      {
        field: "CompanyName",
        title: "Company Name"
      },
      {
        title: "Contact Info",
        columns: [
          {
            field: "ContactTitle",
            title: "Contact Title"
          },
          {
            field: "ContactName",
            title: "Contact Name"
          },
          {
            title: "Location",
            columns: [ 
              { field: "Country" },
              { field: "City" }
            ]
          },
          {
            field: "Phone",
            title: "Phone"
          }
        ]
      }
    ]
  });

  $("#country").on("click", function() {
    var grid = $("#grid").data("kendoGrid");  
    var col = grid.columns[1].columns[2].columns[0];
    if (col.hidden) {
      grid.showColumn(col.field);
    } else {
      grid.hideColumn(col.field);
    } 
  });
});

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css" />

<script src="http://cdn.kendostatic.com/2014.3.1119/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>
<button id="country" class="k-button">Toggle Country</button>
<div id="grid"></div>