如何动态设置 Wijmo Grid 行高（支持动态 ID 场景）-js教程-PHP中文网

如何动态设置 Wijmo Grid 行高（支持动态 ID 场景）

本文介绍在 Wijmo FlexGrid 中通过 JavaScript 动态设置行高或单元格高度的两种可靠方案：一是利用 loadedRows 事件为每行绑定自定义 CSS 类或直接设置 height 属性；二是使用属性选择器或全局样式覆盖实现 CSS 层面的动态适配，彻底规避硬编码 ID 问题。

本文介绍在 wijmo flexgrid 中通过 javascript 动态设置行高或单元格高度的两种可靠方案：一是利用 `loadedrows` 事件为每行绑定自定义 css 类或直接设置 `height` 属性；二是使用属性选择器或全局样式覆盖实现 css 层面的动态适配，彻底规避硬编码 id 问题。

Wijmo FlexGrid 默认采用紧凑布局，若需统一或按需调整行高（尤其在动态生成容器 ID 的场景下），不推荐依赖 jQuery 直接操作 DOM 样式（如 $('.wj-cell').css(...)），原因有三：

Wijmo 内部会重置/覆盖手动注入的内联样式；
动态 ID 导致 CSS 选择器难以维护；
单元格渲染受虚拟滚动与模板机制影响，DOM 节点可能被复用或延迟挂载。

✅ 推荐方案一：使用 loadedRows 事件（Vue 环境）
该事件在行数据加载完成后触发，可安全访问并修改每一行的样式属性：

<template><wj-flex-grid :items-source="data" :loaded-rows="onLoadedRows" :headers-visible="true"></wj-flex-grid></template><script>
export default {
  methods: {
    onLoadedRows(grid) {
      grid.rows.forEach(row => {
        // 方案 A：统一设置固定行高（单位：px）
        row.height = 48;

        // 方案 B：根据数据动态设置（如字段含 height 配置）
        // const dt = row.dataItem;
        // row.height = dt?.customRowHeight || 48;

        // 方案 C：添加自定义 CSS 类（更灵活，便于主题控制）
        // row.cssClass = 'custom-row-height';
      });
    }
  }
};
</script>

⚠️ 注意：row.height 是 Wijmo 内置属性，优先级高于 CSS padding 或 line-height，且不受虚拟滚动干扰，是官方推荐的行高控制方式。

✅ 推荐方案二：CSS 全局样式 + 属性选择器（通用 JS/React/Vue）
若需纯 CSS 方案（例如兼容非 Vue 环境或统一主题），可利用 Wijmo 组件的稳定类名，结合 [id^="form-"] 等属性选择器匹配动态 ID：

/* 匹配所有以 "form-" 开头的容器下的 Wijmo 单元格 */
[id^="form-"] .wj-cell,
[id^="form-"] .wj-row:not(.wj-header) .wj-cell {
  padding: 12px 8px !important; /* 垂直内边距决定视觉行高 */
  line-height: 1.5;
}

/* 更精准：仅作用于数据行（排除表头和分组行） */
[id^="form-"] .wj-cells .wj-row.wj-data .wj-cell {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

? 小技巧：Wijmo 的 .wj-cell 默认 box-sizing: border-box，因此 padding 可直接扩展单元格内容区域高度；配合 !important 可确保覆盖组件默认样式（但应谨慎使用，建议封装为独立样式表）。