關於列 wordWrap自適應問題

登录

實例：
在開始的時候，給定列寬度為200，本身就是小於內容的寬度，所以列折行顯示，當調整列寬的時候，拉長列寬，匯顯示為一行，或者縮小列寬，也是折行顯示，
那麼在開始設定列寬為400（大於內容本身的寬度），縮小列寬，是不會自動折行的。請在實例中驗證。
那麼在開始設定寬度大於內容寬度，為一行顯示時，縮小寬度，如何折行顯示？

KevinChen · KevinChen

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

KevinChen · KevinChen

你好，实际上当宽度初始化改为400时，这里不是没有折行，而是行高变了，导致折行后看不到折下去的内容，如果您在初始化200时，拖动变窄列宽，也可以发现这个情况。

需要解决的问题是行高自适应，关于行高自适应可以参考：
https://gcdn.grapecity.com.cn/fo ... &extra=page%3D1

醉汀雨笙 · 醉汀雨笙

因为在多网格模式中，设置自适应行高不起作用，才设置列模式的，
你们官网的实列，设置行自适应大小，不起效果

KevinChen · KevinChen

您好，正在处理这个问题，预计2小时左右答复

KevinChen · KevinChen

您好，请参考代码示例：

import 'bootstrap.css';
import '@grapecity/wijmo.styles/wijmo.css';
import './styles.css';
import * as wjCore from '@grapecity/wijmo';
import * as wjPdf from '@grapecity/wijmo.pdf';
import * as wjMultiRow from '@grapecity/wijmo.grid.multirow';
import * as wjGridXlsx from '@grapecity/wijmo.grid.xlsx';
import * as wjGridPdf from '@grapecity/wijmo.grid.pdf';
import { generateOrdersSlipData } from './data';
//
document.readyState === 'complete' ? init() : window.onload = init;
//
function init() {
let data = generateOrdersSlipData();
let ordersSlip = new wjMultiRow.MultiRow('#ordersSlip', {
itemsSource: data,
layoutDefinition: generateLayoutDef(),
resizedColumn: function(){
ordersSlip.autoSizeRows()
}
});
ordersSlip.autoSizeRows()
let cv = ordersSlip.collectionView;
cv.collectionChanged.addHandler((sender, e) => {
let unitPrice, quantity;
if (e.action === wjCore.NotifyCollectionChangedAction.Change && !!e.item) {
unitPrice = +e.item.unitPrice;
quantity = +e.item.quantity;
if (!isNaN(unitPrice) && !isNaN(quantity)) {
e.item.amount = unitPrice * quantity;
}
}
});
// Generate the layout definition for the MultiRow control.
function generateLayoutDef() {
return [
{
colspan: 3,
cells: [
{ binding: 'productId', header: 'Product ID', width: 90 },
{ binding: 'categoryId', header: 'Category ID', width: 90 },
{ binding: 'categoryName', header: 'Category', width: 90 },
{ binding: 'productName', header: 'Product Name', colspan: 3 }
]
},
{
cells: [
{ binding: 'quantity', header: 'Quantity', width: 140 },
{ binding: 'packageUnit', header: 'Package Unit', width: 140 }
]
},
{
cells: [
{ binding: 'unitPrice', header: 'Unit Price', format: 'c2', width: 80 }
]
},
{
cells: [
{ binding: 'amount', header: 'Amount', isReadOnly: true, format: 'c2', width: 80 }
]
},
{
cells: [
{ binding: 'shippingId', header: 'Shipping ID', width: 100 },
{ binding: 'discontinued', header: 'Discontinued', width: 100 }
]
},
{
cells: [
{ binding: 'remarks', header: 'Remarks', width: 140, wordWrap:true },
{ binding: 'description', header: 'Product Description', width: 140, wordWrap:true }
]
}
];
}
document.querySelector('#exportXlsx').addEventListener('click', () => {
wjGridXlsx.FlexGridXlsxConverter.saveAsync(ordersSlip, null, 'OrdersSlip.xlsx');
});
document.querySelector('#exportPdf').addEventListener('click', () => {
let doc = new wjPdf.PdfDocument({
header: {
declarative: {
text: '\t&[Page]\\&[Pages]'
}
},
footer: {
declarative: {
text: '\t&[Page]\\&[Pages]'
}
},
ended: function (sender, args) {
wjPdf.saveBlob(args.blob, 'OrdersSlip.pdf');
}
}), settings = {
styles: {
cellStyle: {
backgroundColor: '#ffffff',
borderColor: '#c6c6c6'
},
altCellStyle: {
backgroundColor: '#f9f9f9'
},
headerCellStyle: {
backgroundColor: '#eaeaea'
}
}
};
wjGridPdf.FlexGridPdfConverter.draw(ordersSlip, doc, null, null, settings);
doc.end();
});
}

复制代码

测试地址：
https://demo.grapecity.com.cn/wi ... w/OrdersSlip/purejs

关键代码：

let ordersSlip = new wjMultiRow.MultiRow('#ordersSlip', {
itemsSource: data,
layoutDefinition: generateLayoutDef(),
resizedColumn: function(){
ordersSlip.autoSizeRows()
}
});
ordersSlip.autoSizeRows()

复制代码

醉汀雨笙 · 醉汀雨笙

已测试成功！谢谢！

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

[已处理] 關於列 wordWrap自適應問題

最佳答案

6 个回复

本帖子中包含更多资源

本帖子中包含更多资源

微信认证勋章

讲师达人

悬赏达人

元老葡萄

SpreadJS 认证

SpreadJS 高级认证