如何根据列的最大大小动态设置 YUI 数据表的宽度答案

【问题标题】：How to set width for YUI-data table dynamically based on max size of Column如何根据列的最大大小动态设置 YUI 数据表的宽度
【发布时间】：2011-07-11 15:57:41
【问题描述】：

我有一个 YUI 数据表，我将以下数据放入表中：

 {key:"name", label:"name", editor: nameChoiceEditor},
 {key:"group", label:"group", editor: groupChoiceEditor},
 {key:"colony", label:"colony", width: 210, editor: colonyChoiceEditor},
 ...

此处name 列的宽度设置为为该名称输入的最大字符长度，与group 相同。 colony的列宽设置为210，与数据长度无关。

我的问题是当name 列有多个单词，如“odiah chitukuri”，显示在两行中，如下所示：

  odaiah
  chitukuri

但是当它是像“odaiahchitukuri”这样的一个词时，它会显示在一行中，这意味着该列正在调整以适应这个词。

我应该在单行中有不同的单词。该怎么做？

【问题讨论】：

标签： yui yui-datatable

【解决方案1】：

将“中断”空格替换为非中断空格。

尝试以下方法：

变化：

{key:"colony", label:"colony", width: 210, editor: colonyChoiceEditor},

收件人：

{key:"colony", label:"colony", width: 210, editor: colonyChoiceEditor
  formatter: function (el, oRecord, oColumn, oData) {
    el.innerHTML = oData.replace(/ /g, '&nbsp;');
  }
},

【讨论】：

【解决方案2】：

我不确定您是否正在寻找一种始终将单词保持在一行的解决方案。但一般来说，数据表可以很好地根据里面的内容正确地分隔列。在某些情况下，尽管我肯定必须手动设置列的宽度。下面是一个带有类 appicon 的列的示例：

.yui-skin-sam .yui-dt tbody td.appicon {
    width: 40px;
}

请记住，一旦列中的字数超过其定义的大小，它将始终移动到下一行。

【讨论】：

【解决方案3】：

在数据表列中定义：

将是width:100
不是width:"100px"
或width:"100"
或width:"100em"

使用宽度：100

这样对我来说工作正常

【讨论】：