You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何为qx.ui.progressive表格设置自定义行高适配多行文本

问题描述

我尝试修改qx.ui.progressive表格的行高,以容纳单元格内的多行文本内容。此前在qx.ui.table中尝试该操作,但无法设置自定义行高。

qooxdoo演示浏览器中有一个示例(qxl.demobrowser.demo.progressive.ProgressiveTable_VarRowHeight),但该示例是通过图片高度来设置单元格高度的。请问如何通过.string或.html内容来设置行高?

尝试的代码
var createRow = function (html, new_height) {
  var ret = {
    renderer: "row",
    location: "end",
    data: [html, html],
    // data: [{html, height: h}, {html, height: h}],
    height: new_height // Custom height
  };

  return ret;
};


var columnWidths = new qx.ui.progressive.renderer.table.Widths(2);
columnWidths.setWidth(0, "2*");
columnWidths.setWidth(1, "1*");

var columnNames = ["Literal", "Html"];

// Instantiate a Progressive with a default structure with header
var header = new qx.ui.progressive.headfoot.TableHeading(
  columnWidths,
  columnNames
);

var footer = new qx.ui.progressive.headfoot.Progress(
  columnWidths,
  columnNames
);

var structure = new qx.ui.progressive.structure.Default(header, footer);
var progressive = new qx.ui.progressive.Progressive(structure);

// Instantiate a data model and populate it.
var dataModel = new qx.ui.progressive.model.Default();
var rowData = [];

var html = 
  "<div style='background-color: cyan; text-align: center;'>" +
  "  Hello world!" +
  "</div>";
rowData.push(createRow(html, 40));

var html = 
  "<div style='background-color: cyan; text-align: center;'>" +
  "  Hi there." +
  "  <span style='color: red;'>" +
  "       " +
  "    I'm very red!" +
  "  </span>" +
  "</div>";

rowData.push(createRow(html, 80));


dataModel.addElements(rowData);

// Tell Progressive about its data model
progressive.setDataModel(dataModel);

// Instantiate a table row renderer
var rowRenderer = new qx.ui.progressive.renderer.table.Row(columnWidths);

// Give Progressive the renderer, and assign a name
progressive.addRenderer("row", rowRenderer);

// Tell the row renderer to use a String renderer for column 0
var r = new qx.ui.progressive.renderer.table.cell.String();
rowRenderer.addRenderer(0, r);

// Tell the row renderer to use an HTML renderer for column 1
var r = new qx.ui.progressive.renderer.table.cell.Html();
rowRenderer.addRenderer(1, r);

内容的提问来源于stack exchange,提问作者Uli Hartman

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.20 01:53:11