jquery - 当网格具有隐藏列时在 Kendo 网格 (jQuery) 上实现最小宽度

Question

我正在尝试对 Kendo Grid 中可调整大小的列强制执行最小宽度规则。我使用了他们提供的样本 here .在他们的例子中，所有的列都被显示出来。在我的例子中，有一些列是隐藏的。我有 sample here使用 Kendo 的 Dojo 来说明我的问题。隐藏列之后的任何列都不再保持最小宽度规则。我能想到的是，这是 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(""));
        });
    }

但在动态显示隐藏方面，再看一下同一网址的编辑，我也更改了此示例中的代码以显示 columnMenu: true,