gwt - GWT CellTable セル内でテキストをラップするにはどうすればよいですか?

Question

列のテキストを折り返す必要があります。私の列のサイズは小さいです。したがって、列幅を設定すると、一部の文字が表示されなくなります。テキストの長さが列のサイズよりも大きいためです。テキストにスペースがある場合は、それ自体が折り返されます。したがって、テキストをラップする必要があります。

たとえば、emailColumn の値は xxxxxxxxxxxxx@XXXXXXX.com です。

xxxxxxxxxxx@x最初の行と次の行の結果を期待していxxxx.xomます。

出来ますか？

Answer 1

セルテーブル内でテキストをラップしようとしましたが、カスタム列を作成することでこれを実現できます。

セルテーブルの抽象セル列を1つ作成し、そのセルにhtmlコンテンツを追加して、このようにセルテーブルに列を追加します。

1. セル テーブルを含むメインの Java ファイルにこのコードを追加し、必要な場所にコードの下に貼り付けます。

       WrappedColumn<T> textDetail = new WrappedColumn<T>() {
           // This is method in wrapped details column java file.
   
           public WrapDetails getValue(T object) {
               return new WrapDetails( T.<your method1 for wrap text>(), T.<your method2 for wrap text>());
           }
       };    
       <your cell table>.addColumn(textDetail);
   

2. 動的データをレンダリングするために「WrapDetails.java」などの名前の新しい Java ファイルを作成し、コードの下に貼り付けます。

   public class WrapDetails extends Composite {    
       String mail_id;
       String website;
   
       public WrapDetails(String id, String site) {
           this.mail_id = id;
           this.website = site;
       }   
   }
   

3. 「WrappedColumn.java」という名前のラップ テキスト列用の新しい Java ファイルを作成し、コードの下に貼り付けます。

   public abstract class WrappedColumn<T> extends Column<T, WrapDetails> {
   
       public WrappedColumn() {
           super(new WrapDetailsColumnCell());
       }
   
       /**      
        * Return the passed-in object. 
        * @param object The value to get
        */    
      @Override    
      public WrapDetails getValue(T object) {   
          return null;         
      }    
   }
   

4. 「WrapDetailsColumnCell.java」という名前の新しい Java ファイルを作成し、コードの下に貼り付けます。

   public class WrapDetailsColumnCell extends AbstractCell<WrapDetails> implements Cell<WrapDetails>{      
       String mail_id, website;
   
       /**
        * Add this constructor, if you want click event for this column.
        */
       public WrapDetailsColumnCell() {
           super("click", "keydown");      
       }
   
       /**
        * This method provides style for your wrap data
        * 
        */
       @Override
       public void render(Context context, WrapDetails value, SafeHtmlBuilder sb) {
   
           sb.appendHtmlConstant("<div><table width='100%'>");
           sb.appendHtmlConstant("<tr><td><div style='your style here'>"+mail_id+"</div></td></tr>");
           sb.appendHtmlConstant("<tr><td><div style='your style here'>"+website+"</div></td></tr>");
           sb.appendHtmlConstant("</table></div>");
       }
   
       /**
        * This method update cell value on click event.
        * 
        */
       @Override
       public void onBrowserEvent(Context context, Element parent,WrapDetails value, NativeEvent event,  ValueUpdater<FaxDetails> valueUpdater) {
           super.onBrowserEvent(context, parent, value, event, valueUpdater);
           setValue(context, parent, value); 
           valueUpdater.update(value);
       }
   }
   

それは私のためにうまくいっています。これを試した後、問題が発生した場合はお知らせください。楽しむ。