如何使GWT Datagrid的第一列固定並且水平和垂直滾動

Question

當前，GWT DataGrid標題在垂直滾動期間使用固定標題行執行此操作。是否有辦法在整個（第一）專欄上實現同樣的目標？

Answer 1

我已經實現了可以凍結DataGrid中第一列的ScrolledGrid。您需要使用它來代替DataGrid，以便凍結第一列。

import com.google.gwt.dom.client.*; 
import com.google.gwt.event.dom.client.ScrollEvent; 
import com.google.gwt.event.dom.client.ScrollHandler; 
import com.google.gwt.user.cellview.client.DataGrid; 
import com.google.gwt.user.client.ui.HeaderPanel; 
import com.google.gwt.user.client.ui.ScrollPanel; 

/** 
* 
* @author Yuri Plaksyuk 
*/ 
public class ScrolledGrid extends DataGrid { 

    private final Text cssText; 
    private boolean addedClass = false; 
    private int currentScrollLeft = 0; 

    public ScrolledGrid() { 
     cssText = Document.get().createTextNode(""); 

     StyleElement styleElement = Document.get().createStyleElement(); 
     styleElement.setType("text/css"); 
     styleElement.appendChild(cssText); 

     HeaderPanel headerPanel = (HeaderPanel) getWidget(); 
     headerPanel.getElement().insertFirst(styleElement); 

     final ScrollPanel scrollPanel = (ScrollPanel) headerPanel.getContentWidget(); 
     scrollPanel.addScrollHandler(new ScrollHandler() { 

      @Override 
      public void onScroll(ScrollEvent event) { 
       int scrollLeft = scrollPanel.getHorizontalScrollPosition(); 
       if (scrollLeft != currentScrollLeft) { 
        StringBuilder css = new StringBuilder(); 
        if (scrollLeft > 0) { 
         css.append(".ScrolledGrid-frozen {"); 
         css.append("background-color: inherit;"); 
         css.append("}"); 

         css.append(".ScrolledGrid-frozen div {"); 
         css.append("position: absolute;"); 
         css.append("left: ").append(scrollLeft).append("px;"); 
         css.append("width: ").append(getColumnWidth(getColumn(0))).append(";"); 
         css.append("padding-left: 1.3em;"); 
         css.append("padding-right: 0.5em;"); 
         css.append("margin-top: -0.7em;"); 
         css.append("white-space: nowrap;"); 
         css.append("background-color: inherit;"); 
         css.append("}"); 
        } 
        else 
         css.append(".ScrolledGrid-frozen { }"); 

        css.append("th.ScrolledGrid-frozen { background-color: white; }"); 

        cssText.setData(css.toString()); 


        if (!addedClass) { 
         NodeList<TableRowElement> rows; 
         TableRowElement row; 
         TableCellElement cell; 

         rows = getTableHeadElement().getRows(); 
         for (int i = 0; i < rows.getLength(); ++i) { 
          row = rows.getItem(i); 
          cell = row.getCells().getItem(0); 
          cell.setInnerHTML("<div>" + cell.getInnerHTML() + "</div>"); 
          cell.addClassName("ScrolledGrid-frozen"); 
         } 

         rows = getTableBodyElement().getRows(); 
         for (int i = 0; i < rows.getLength(); ++i) { 
          row = rows.getItem(i); 
          cell = row.getCells().getItem(0); 

          cell.addClassName("ScrolledGrid-frozen"); 
         } 
         addedClass = true; 
        } 

        currentScrollLeft = scrollLeft; 
       } 
      } 
     }); 
    } 
} 

不幸的是，一些CSS值是硬編碼的。