Tự động thay đổi kích thước chiều rộng của DataGridCoulmn/AdvancedDataGridColumn để phù hợp với nội dung

Question

Tôi muốn rằng DataGridColumn hoặc AdvancedDataGridColumn sẽ tự động thay đổi kích thước chiều rộng của nó để phù hợp với những nội dung trong ..

Tôi mới để flex. Tôi muốn thực hiện một cái gì đó giống như bảng HTML.

Dữ liệu được hiển thị là văn bản đơn giản. Một số hàng có văn bản ngắn hơn, trong trường hợp đó tôi muốn tự động mở rộng chiều rộng của DataGridColumn.

Bất kỳ trợ giúp nào để giải quyết vấn đề này.

Cảm ơn trước

Answer 1

Bạn có thể đặt chiều rộng thành một số tỷ lệ cố định nếu bạn có thể đoán chiều rộng có thể. Nhưng tôi sẽ đề nghị khác optiong:

1. thiết lập thuộc tính của DataGrid variableRowHeight true
2. thiết lập thuộc tính của cột đó sẽ có văn bản dài hơn true WordWrap.

Bằng cách này, văn bản dài của bạn sẽ được đặt thành nhiều dòng và chỉ chiều cao hàng đó mới được tăng lên. Chỉ cần cung cấp cho nó một thử. nếu bạn không muốn điều này, sau đó tôi nghĩ rằng bạn có thể cần phải viết một lớp mới mở rộng datagridColumn.

<mx:DataGrid dataProvider="{testAC}" width="80%" height="100%" variableRowHeight="true"> 
     <mx:columns> 
       <mx:DataGridColumn dataField="company" wordWrap="true"/>     <mx:DataGridColumn dataField="share"/> 
       <mx:DataGridColumn dataField="expense"/> 
     </mx:columns> 
</mx:DataGrid> 

Chúc mừng, PK

Answer 2

Bạn đã nhấn vào một trong những vấn đề lớn nhất của DataGrid và AdvancedDataGrid. Tôi hoàn toàn ghét làm thế nào cứng là để có được nội dung di động để xuất hiện thoải mái. Vì các lý do không rõ ràng ngay lập tức, các giá trị trường hẹp sẽ xuất hiện trong các ô rất rộng trong khi nội dung rộng và các tiêu đề sẽ bị thu hẹp.

Điều này đặc biệt đúng đối với cột đầu tiên và cột cuối cùng vì một số lý do.

Giải pháp duy nhất tôi tìm thấy là đặt thuộc tính minWidth trên cột và trước tiên tôi phải đi qua dữ liệu để tìm các ngoại lệ rộng nhất trong các cột đó và đảm bảo chúng phù hợp một cách thoải mái. Một giải pháp khác giúp là có các cột giả ở bên trái và bên phải có độ rộng và minWidth và maxWidth của một số kích thước rất nhỏ, nói 5, có vẻ như cho phép các cột thực ở giữa để "thở" tốt hơn một chút.

<mx:columns> 
    <mx:DataGridColumn id="leftDummy" width="5" minWidth="5" maxWidth="5"/> 
    <!-- Your "real" columns here, with minWidth assignments --> 
    <mx:DataGridColumn id="rightDummy" width="5" minWidth="5" maxWidth="5"/> 
</mxcolumns> 

Hãy cẩn thận, mặc dù vậy. Nếu bạn đặt chiều rộng trên cột, nó được hiểu không phải là giá trị bằng chữ hoặc tỷ lệ phần trăm thực tế nhưng dưới dạng một số loại tỷ lệ được phân nửa. Tôi chỉ có thể giả định rằng các quy trình định cỡ cột bị mệt mỏi khi tính toán và giải quyết trên một số loại giải thích "hợp lý" về chiều rộng cột - mà, tất nhiên, hóa ra là hoàn toàn không hợp lý phần lớn thời gian.

Tại thời điểm này, tôi rất thất vọng Tôi đang xem xét việc mua sản phẩm của bên thứ 3, ElfGrid, giải quyết những vấn đề này và hơn thế nữa. Xem tài liệu, đặc biệt là ElfColumnUtils, có một số phương pháp rất hữu ích để xử lý các vấn đề này. Nó cũng khá nhanh trong thử nghiệm tôi đã làm.

Answer 3

Tôi đã có cùng một vấn đề, bạn nên biết trước kích thước của chuỗi dài hơn của bạn, sau đó gán MinWidth kích thước đó và có cột resizeable = 'false'.

Nó làm việc cho tôi

Answer 4

Đây là cách tôi làm điều đó, và nó hoạt động khá tốt ...

Tạo một biến bindable và cung cấp cho nó một số bắt đầu (giả sử 100), ví dụ:

[Bindable] private var colWidth:int = 100; 

Sử dụng dữ liệu ràng buộc để kích thước các cột, ví dụ:

mx:DataGridColumn width="{colWidth}" 

Thêm một tay cầm kiện thay đổi kích thước r vào lưới dữ liệu của bạn, ví dụ:

myDataGrid.addEventListener(ResizeEvent.RESIZE , onDataGridResize); 

Trong trình xử lý nghe chiều rộng mới của lưới dữ liệu, lấy số đó và chia cho số cột (nếu tất cả các cột đều bằng nhau) hoặc thực hiện một số phép tính để tạo 'tỷ lệ phần trăm' cho chiều rộng của các cột, ví dụ:

private function onDataGridResize(event:ResizeEvent):void { 
    colWidth = myDataGrid.width/numberOfColumns; 
}