Question

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

这是js的一个例子：


    $('#data-plan').click(function () {        
        $('#data-plan').find('i').toggleClass('show hidden');        
        var grid = $("#lpdatagrid").data("kendoGrid");        
        var col = 0;        
        if (grid.columns[col].hidden) {        
            grid.showColumn(+col);        
        } else {        
            grid.hideColumn(+col);        
        }        
    });

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

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

Answer 1

您可以在要显示/隐藏的列中使用field的名称。假设您的网格具有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");
        }

＆＃13;

$(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);
    } 
  });
});

＆＃13;

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

＆＃13;

Kendo UI showColumn多列

1 个答案: