Kendo UI showColumn 多栏

Posted 2023-05-07

【中文标题】Kendo UI showColumn 多栏

【英文标题】：Kendo UI showColumn multi-column

【发布时间】：2015-01-25 04:55:06

【问题描述】：

我正在使用 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 调用的二级标题的列“数字”是什么？

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

【问题讨论】：

如果您知道列中表示的字段的名称，您可以使用该字段显示/隐藏它。

【参考方案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>

【讨论】：

谢谢！您通过其他答案多次帮助了我。我很感激。这是这个答案的关键： var col = grid.columns[1].columns[2].columns[0];我只想更改一个变量（col），如果没有数字，我无法在其中获得列的名称。但是，现在我知道如何了，这个数字可以正常工作。