表头自适应高度

登录

我在列上设置了wordWrap=true; 内容的确自动换行了，但是高度却没变

KevinChen · KevinChen

你好，感谢反馈，本帖就结贴了，新的问题欢迎发新帖交流~

KevinChen · KevinChen

请参考这篇示例：

http://jsfiddle.net/Wijmo5/apzwy85z/

关键代码如下：

$scope.itemsSourceChanged = function(s, e) {
setTimeout(function() {
// enable wrapping on first header row
var row = s.columnHeaders.rows[0];
row.wordWrap = true;
// autosize first header row
s.autoSizeRow(0, true);
// limit height to 100px
//if (row.height > 100) {
// row.height = 100;
//}
});
}

复制代码

wss. · wss.

KevinChen 发表于 2020-6-12 18:20
请参考这篇示例：

http://jsfiddle.net/Wijmo5/apzwy85z/

你好，页面打不开

KevinChen · KevinChen

你好，请将以下代码完整复制，到示例页面替换掉app.js，点击运行即可看到效果：

import 'bootstrap.css';
import '@grapecity/wijmo.styles/wijmo.css';
import { SortDescription, format } from '@grapecity/wijmo';
import { FlexGrid } from '@grapecity/wijmo.grid';
document.readyState === 'complete' ? init() : window.onload = init;
function init() {
// create some random data
var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(',');
var data = [];
for (var i = 0; i < countries.length; i++) {
data.push({
id: i,
country: countries[i],
sales: Math.random() * 10000,
expenses: Math.random() * 5000
});
}
var autoFitColumnHeaderWidth = function(s,e){
setTimeout(function() {
// enable wrapping on first header row
var row = s.columnHeaders.rows[0];
row.wordWrap = true;
// autosize first header row
s.autoSizeRow(0, true);
});
}
// bind a grid to the raw data
var theGrid = new FlexGrid('#theGrid', {
allowSorting: false,
showSort: false,
autoGenerateColumns: false,
columns: [
{ binding: 'country', header: 'This is the Country column, but the heading is ridiculously wide so we have to wrap...', width: '2*' },
{ binding: 'sales', header: 'Sales', width: '*', format: 'n2' },
{ binding: 'expenses', header: 'Expenses', width: '*', format: 'n2' }
],
itemsSource: data,
resizedColumn: autoFitColumnHeaderWidth,
loadedRows: autoFitColumnHeaderWidth
});
// show the current item
var selItemElement = document.getElementById('selectedItem');
function updateCurrentInfo() {
selItemElement.innerHTML = format('Country: {country}, Sales: {sales:c0} Expenses: {expenses:c0}', theGrid.collectionView.currentItem);
}
// update current item now and when the grid selection changes
updateCurrentInfo();
theGrid.collectionView.currentChanged.addHandler(updateCurrentInfo);
// sort the data by country
var sd = new SortDescription('country', true);
theGrid.collectionView.sortDescriptions.push(sd);
}

复制代码

示例地址：

https://demo.grapecity.com.cn/wi ... nding/Basics/purejs

wss. · wss.

KevinChen 发表于 2020-6-15 09:28
你好，请将以下代码完整复制，到示例页面替换掉app.js，点击运行即可看到效果：

能否做到单行的话垂直居中呢

wss. · wss.

KevinChen 发表于 2020-6-15 09:28
你好，请将以下代码完整复制，到示例页面替换掉app.js，点击运行即可看到效果：

而且我发现了一个问题，好像这个方法对自定义编辑事件产生了影响（不能编辑）

wss. · wss.

本帖最后由 wss. 于 2020-6-16 17:32 编辑

wss. 发表于 2020-6-16 16:46
而且我发现了一个问题，好像这个方法对自定义编辑事件产生了影响（不能编辑）

准确的说loadedRows是这个导致了这个问题，进不来beginningEdit事件

wss. · wss.

KevinChen 发表于 2020-6-15 09:28
你好，请将以下代码完整复制，到示例页面替换掉app.js，点击运行即可看到效果：

打扰了打扰了，我知道问题了

wss. · wss.

KevinChen 发表于 2020-6-16 18:28
你好，感谢反馈，本帖就结贴了，新的问题欢迎发新帖交流~

不好意思，
楼上这个问题还没解决：
能否做到单行的话垂直居中呢

		自动登录	找回密码
密码			立即注册

[已处理] 表头自适应高度

最佳答案

27 个回复

本帖子中包含更多资源

本帖子中包含更多资源

讲师达人

悬赏达人

元老葡萄

SpreadJS 认证

SpreadJS 高级认证

微信认证勋章