时间戳

首页 > 解决方案 > 如何在隐藏列后强制 easyui 数据网格调整其行的大小？

datagrid - 如何在隐藏列后强制 easyui 数据网格调整其行的大小？

问题描述

我有一个 CRUD 页面，它在 JQuery EasyUI 数据网格中显示数据。有“默认”和“可选”列，用户可以使用带有可检查元素的菜单隐藏和显示可选列。

隐藏/显示部分运行良好，但是我无法弄清楚如何在列更改后正确调整所有内容。

这是我尝试过的：

选项1：设置hidden列的属性

// in the checkbox's onclick event
for(var i = 0; i < columns[0].length; i ++) {
  if(columns[0][i].fields == `attr_${check.attr("data-attrid")}`) {
    columns[0][i].hidden = !check.is(":checked");
    // adding or removing the next line doesn't change the results - originally width was set to 100
    // columns[0][i].width = 100;
    break;
  }
}

dg.datagrid({ columns: columns });
// adding or removing the next line doesn't change the results
// dg.datagrid("resize");

使用 hidden 属性，我可以成功删除或添加列，但是当我显示以前隐藏的列时，它变得太小以至于无法再显示整个数据。将列“宽度”属性重置为其原始值，和/或在设置新列值后在数据网格上调用调整大小不会改变任何内容。

选项 2：在数据网格上调用showColumn和hideColumn

// in the checkbox's onclick event
dg.datagrid(check.is(":checked") ? "showColumn" : "hideColumn", `attr_${check.attr("data-attrid")}`);

此选项成功显示或隐藏给定列。隐藏时，它会调整剩余列的大小以适应数据网格并为滚动条留出空间。然而，在显示它时，它会调整列标题的大小以填充整个数据网格，但会调整包含数据的行的大小，以便为滚动条留出小空间，从而使列标题和数据在显示位置方面不同步。如果我resize在显示/隐藏后调用，列和它们的标题再次具有相同的宽度，但它们为一整列留出了空间，而不仅仅是滚动条​​，看起来很可怕。

环境

标签： datagridjquery-easyui

解决方案

由于一些奇怪的缓存问题，您必须使用选项 2 并调用resize 两次。

dg.datagrid(shouldShow ? "showColumn" : "hideColumn", "fieldName");
dg.datagrid("resize");
dg.datagrid("resize");

这些列现在为滚动条留出了一个小空间，但否则会填充数据网格，并且这些列正好显示在它们的标题下方。

推荐阅读