關於列 wordWrap自適應問題

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

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

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

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

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

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

您好，请参考代码示例：

1. import 'bootstrap.css';
   
2. import '@grapecity/wijmo.styles/wijmo.css';
   
3. import './styles.css';
   
4. import * as wjCore from '@grapecity/wijmo';
   
5. import * as wjPdf from '@grapecity/wijmo.pdf';
   
6. import * as wjMultiRow from '@grapecity/wijmo.grid.multirow';
   
7. import * as wjGridXlsx from '@grapecity/wijmo.grid.xlsx';
   
8. import * as wjGridPdf from '@grapecity/wijmo.grid.pdf';
   
9. import { generateOrdersSlipData } from './data';
   
10. //
    
11. document.readyState === 'complete' ? init() : window.onload = init;
    
12. //
    
13. function init() {
    
14.     let data = generateOrdersSlipData();
    
15.     let ordersSlip = new wjMultiRow.MultiRow('#ordersSlip', {
    
16.         itemsSource: data,
    
17.         layoutDefinition: generateLayoutDef(),
    
18.         resizedColumn: function(){
    
19.             ordersSlip.autoSizeRows()
    
20.         }
    
21.     });
    
22.     ordersSlip.autoSizeRows()
    
23. 
    
24.     let cv = ordersSlip.collectionView;
    
25.     cv.collectionChanged.addHandler((sender, e) => {
    
26.         let unitPrice, quantity;
    
27.         if (e.action === wjCore.NotifyCollectionChangedAction.Change && !!e.item) {
    
28.             unitPrice = +e.item.unitPrice;
    
29.             quantity = +e.item.quantity;
    
30.             if (!isNaN(unitPrice) && !isNaN(quantity)) {
    
31.                 e.item.amount = unitPrice * quantity;
    
32.             }
    
33.         }
    
34.     });
    
35.     // Generate the layout definition for the MultiRow control.
    
36.     function generateLayoutDef() {
    
37.         return [
    
38.             {
    
39.                 colspan: 3,
    
40.                 cells: [
    
41.                     { binding: 'productId', header: 'Product ID', width: 90 },
    
42.                     { binding: 'categoryId', header: 'Category ID', width: 90 },
    
43.                     { binding: 'categoryName', header: 'Category', width: 90 },
    
44.                     { binding: 'productName', header: 'Product Name', colspan: 3 }
    
45.                 ]
    
46.             },
    
47.             {
    
48.                 cells: [
    
49.                     { binding: 'quantity', header: 'Quantity', width: 140 },
    
50.                     { binding: 'packageUnit', header: 'Package Unit', width: 140 }
    
51.                 ]
    
52.             },
    
53.             {
    
54.                 cells: [
    
55.                     { binding: 'unitPrice', header: 'Unit Price', format: 'c2', width: 80 }
    
56.                 ]
    
57.             },
    
58.             {
    
59.                 cells: [
    
60.                     { binding: 'amount', header: 'Amount', isReadOnly: true, format: 'c2', width: 80 }
    
61.                 ]
    
62.             },
    
63.             {
    
64.                 cells: [
    
65.                     { binding: 'shippingId', header: 'Shipping ID', width: 100 },
    
66.                     { binding: 'discontinued', header: 'Discontinued', width: 100 }
    
67.                 ]
    
68.             },
    
69.             {
    
70.                 cells: [
    
71.                     { binding: 'remarks', header: 'Remarks', width: 140, wordWrap:true },
    
72.                     { binding: 'description', header: 'Product Description', width: 140, wordWrap:true }
    
73.                 ]
    
74.             }
    
75.         ];
    
76.     }
    
77.     document.querySelector('#exportXlsx').addEventListener('click', () => {
    
78.         wjGridXlsx.FlexGridXlsxConverter.saveAsync(ordersSlip, null, 'OrdersSlip.xlsx');
    
79.     });
    
80.     document.querySelector('#exportPdf').addEventListener('click', () => {
    
81.         let doc = new wjPdf.PdfDocument({
    
82.             header: {
    
83.                 declarative: {
    
84.                     text: '\t&[Page]\\&[Pages]'
    
85.                 }
    
86.             },
    
87.             footer: {
    
88.                 declarative: {
    
89.                     text: '\t&[Page]\\&[Pages]'
    
90.                 }
    
91.             },
    
92.             ended: function (sender, args) {
    
93.                 wjPdf.saveBlob(args.blob, 'OrdersSlip.pdf');
    
94.             }
    
95.         }), settings = {
    
96.             styles: {
    
97.                 cellStyle: {
    
98.                     backgroundColor: '#ffffff',
    
99.                     borderColor: '#c6c6c6'
    
100.                 },
     
101.                 altCellStyle: {
     
102.                     backgroundColor: '#f9f9f9'
     
103.                 },
     
104.                 headerCellStyle: {
     
105.                     backgroundColor: '#eaeaea'
     
106.                 }
     
107.             }
     
108.         };
     
109.         wjGridPdf.FlexGridPdfConverter.draw(ordersSlip, doc, null, null, settings);
     
110.         doc.end();
     
111.     });
     
112. }
     

复制代码

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

关键代码：

1.     let ordersSlip = new wjMultiRow.MultiRow('#ordersSlip', {
   
2.         itemsSource: data,
   
3.         layoutDefinition: generateLayoutDef(),
   
4.         resizedColumn: function(){
   
5.             ordersSlip.autoSizeRows()
   
6.         }
   
7.     });
   
8.     ordersSlip.autoSizeRows()

复制代码

已测试成功！谢谢！