Question

我试图对Kendo网格中可调整大小的列强制执行最小宽度规则。我使用了他们提供的here示例。在他们的示例中，所有列均被显示。在我的情况下，有些列是隐藏的。我有一个使用Kendo的Dojo的示例here来说明我的问题。隐藏列之后的任何列都不再维护最小宽度规则。最好的是，这是jQuery的问题，它是与已设置为display:none;的元素的交互。

如果有一种变通方法可以强制执行最小宽度，请告诉我。

Answer 1

我似乎已经解决了您的问题，但将其移至隐藏该列的位置。

看看https://dojo.telerik.com/ozuGilOy/11

$(function(){

        $("#grid").kendoGrid({
          columns: [
            { field: "foo", minResizableWidth: 100 },               
            { field: "bar", minResizableWidth: 100,  hidden: true },
            { field: "baz", minResizableWidth: 100 },
            { field: "abc", minResizableWidth: 100 },
            { field: "def", minResizableWidth: 100 },
           ],
           dataSource: {
               data: [{foo: "item", bar: "number", baz: "one", abc: "col", def: "umn"}]
           },
           columnMenu: true,
           resizable: true
        });


        var minTableWidth;
        var minColumnWidth = 100;
        var th;
        var idx;
        var grid;

        $("#grid").data("kendoGrid").resizable.bind("start", function(e) {
           th = $(e.currentTarget).data("th");
           idx = th.index();
           grid = th.closest(".k-grid").data("kendoGrid");
        });

        $("#grid").data("kendoGrid").resizable.bind("resize", function(e) {
           if (th.width() >= minColumnWidth) {
              minTableWidth = grid.tbody.closest("table").width();
           }

           if (th.width() < minColumnWidth) {
              // the next line is ONLY needed if Grid scrolling is enabled
              grid.thead.closest("table").width(minTableWidth).children("colgroup").find("col").eq(idx).width(minColumnWidth);

              grid.tbody.closest("table").width(minTableWidth).children("colgroup").find("col").eq(idx).width(minColumnWidth);
           }
        });

      $("#grid").data("kendoGrid").hideColumn(1);

    });

--------------接受答复后编辑--------------

Ricca，这是我们在生产中使用的东西，用于基于记录在数据库中的一组隐藏列来显示和隐藏列。

这就是我们用来保存可见性的东西

var grid = $("#" + gridName).data("kendoGrid");
var columns = grid.columns;
            var hiddenColumns = new Array();

$.each(columns,
      (idx, element) => {
          for (let key in element) {
              if (element.hasOwnProperty(key)) {
                  if (element.hidden !== 'undefined' && element.hidden) {
                     if (key === 'field') {
                         hiddenColumns.push(element[key]);
                         }
                     }
               }
         }
   });

     var jsonObj = {
     gridName: gridName,
     columns: hiddenColumns.join()
   }
   ... more code here that saves back to our DB via Ajax

这就是我们如何加载

var grid = $("#ProductGridName)").data("kendoGrid");
    for (var key in hiddenColumns) {
        var array = hiddenColumns[key].split(",");
        $.each(array, function (i) {
            grid.hideColumn(array[i].toString().split(" ").join(""));
        });
    }

但是就动态显示隐藏而言，再看一下同一URL上的编辑，并且我也更改了此示例中的代码以显示 columnMenu: true,

Answer 2

回头再看一遍后，我发现了问题所在。问题在于，当在Kendo网格中隐藏一列时，<th>元素将设置为style="display:none;"，但实际上会删除<col>元素。这意味着<th>元素的数量与<col>元素的数量不匹配，因此<col>的索引值在设置宽度时关闭。为了获得正确的索引，您必须获取全部<th>元素的:visible子集中的<th>元素的索引。

当网格具有隐藏列时，增强Kendo网格（jQuery）的最小宽度

2 个答案: