GridStackJS面板中jqxGrid组件适配与动态缩放问题求解

问题说明 #

我是一名新手，将jqxGrid组件嵌入GridStackJS面板时，希望实现以下效果：

• jqxGrid初始尺寸与所在GridStackJS面板完全一致；
• 当面板缩放时，jqxGrid能同步调整尺寸；
• 当网格内容超出面板范围时，仅显示jqxGrid自身的滚动条，而非面板的滚动条。

但设置jqxGrid的宽高为100%时无法达到预期：此时会同时出现网格和面板的滚动条，且网格的水平滚动条始终不显示。

解决步骤 #

1. 修正容器样式
   给GridStack的内容容器清除内边距、设置宽高100%，确保jqxGrid能完全填充容器，同时禁用容器的滚动条，避免面板出现多余滚动条。

2. 动态计算jqxGrid尺寸
   初始化和面板缩放时，直接获取父容器的实际可用尺寸（减去边框等额外空间），再设置给jqxGrid，规避百分比宽高带来的溢出问题。

3. 调整列宽配置
   移除列的百分比宽度设置，改用固定宽度，确保总列宽超出容器时，jqxGrid自动触发水平滚动条显示。

修改后的完整代码 #

HTML #

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gridstack@11.1.1/dist/gridstack.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.1.1/gridstack-all.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/14.0.0/jqwidgets/styles/jqx.base.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/14.0.0/jqwidgets/jqxcore.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/14.0.0/jqwidgets/jqxbuttons.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/14.0.0/jqwidgets/jqxscrollbar.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/14.0.0/jqwidgets/jqxgrid.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/14.0.0/jqwidgets/jqxgrid.selection.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/14.0.0/jqwidgets/jqxdata.js"></script>

<div class="grid-stack">
  <div class="grid-stack-item" gs-x="0" gs-y="0" gs-w="4" gs-h="4">
    <div class="grid-stack-item-content">
      <div id="grid1" class="jqx-grid"></div>
    </div>
  </div>
  <div class="grid-stack-item" gs-x="4" gs-y="0" gs-w="4" gs-h="4">
    <div class="grid-stack-item-content">
      <div id="grid2" class="jqx-grid"></div>
    </div>
  </div>
  <div class="grid-stack-item" gs-x="8" gs-y="0" gs-w="4" gs-h="4">
    <div class="grid-stack-item-content">
      <div id="grid3" class="jqx-grid"></div>
    </div>
  </div>
</div>

CSS #

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

.grid-stack-item-content {
  background: #f4f4f4;
  border: 1px solid #ccc;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.jqx-grid {
  /* 不再设置100%宽高，由JS动态计算 */
}

JavaScript #

$(document).ready(function() {
  const gridstack = GridStack.init({
    cellHeight: 100,
    resizable: {
      handles: 'se, s, e'
    }
  });

  const data = [
    { id: 1, firstName: "Mario", lastName: "Rossi", age: 30 },
    { id: 2, firstName: "Luca", lastName: "Bianchi", age: 25 },
    { id: 3, firstName: "Giulia", lastName: "Verdi", age: 35 },
    { id: 4, firstName: "Giulia", lastName: "Verdi", age: 35 },
    { id: 5, firstName: "Giulia", lastName: "Verdi", age: 35 },
    { id: 6, firstName: "Giulia", lastName: "Verdi", age: 35 },
    { id: 7, firstName: "Giulia", lastName: "Verdi", age: 35 },
    { id: 8, firstName: "Giulia", lastName: "Verdi", age: 35 },
    { id: 9, firstName: "Giulia", lastName: "Verdi", age: 35 },
    { id: 10, firstName: "Giulia", lastName: "Verdi", age: 35 },
    { id: 11, firstName: "Giulia", lastName: "Verdi", age: 35 },
    { id: 12, firstName: "Giulia", lastName: "Verdi", age: 35 },
    { id: 13, firstName: "Giulia", lastName: "Verdi", age: 35 }
  ];

  const source = {
    localdata: data,
    datatype: "array",
    datafields: [
      { name: 'id', type: 'number' },
      { name: 'firstName', type: 'string' },
      { name: 'lastName', type: 'string' },
      { name: 'age', type: 'number' }
    ]
  };

  const dataAdapter = new $.jqx.dataAdapter(source);

  function initGrid(selector) {
    const $container = $(selector).parent();
    const width = $container.innerWidth();
    const height = $container.innerHeight();
    
    $(selector).jqxGrid({
      width: width,
      height: height,
      source: dataAdapter,
      columns: [
        { text: 'ID', datafield: 'id', width: 150 },
        { text: 'Name', datafield: 'firstName', width: 250 },
        { text: 'LastName', datafield: 'lastName', width: 250 },
        { text: 'Age', datafield: 'age', width: 100 }
      ]
    });
  }

  initGrid("#grid1");
  initGrid("#grid2");
  initGrid("#grid3");

  gridstack.on('resizestop', function(event, el) {
    const $grid = $(el).find('.jqx-grid');
    if ($grid.length) {
      const $container = $grid.parent();
      const width = $container.innerWidth();
      const height = $container.innerHeight();
      $grid.jqxGrid('width', width);
      $grid.jqxGrid('height', height);
    }
  });
});

内容的提问来源于stack exchange，提问作者DPZ