当网格具有隐藏列时，在剑道网格 (jQuery) 上添加最小宽度

Question

我正在尝试对剑道网格中可调整大小的列强制执行最小宽度规则。我使用了他们在这里提供的示例。在他们的示例中，将显示所有列。就我而言，有一些列是隐藏的。我这里有一个使用剑道道场的示例来说明我的问题。隐藏列之后的任何列都不再保留最小宽度规则。我能想到的最好的是，这是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

回去再看一眼后，我发现了这个问题。问题是，当列隐藏在剑道网格中时，<th>元素设置为style="display:none;"但实际上删除了<col>元素。这意味着<th>元素的数量与<col>元素的数量不匹配，因此在设置宽度时，<col>的索引值处于关闭状态。若要获取正确的索引，必须获取<th>元素总数<th>:visible子集中的索引。