2012-06-05 2 views
4

В настоящее время заголовок GWT DataGrid делает этот трюк с фиксированной строкой заголовка во время вертикальной прокрутки. Есть ли способ получить то же самое во всей (первой) колонке?Как сделать GWT Datagrid фиксированным и фиксированным по горизонтали и вертикали столбца

ответ

3

Я реализовал ScrolledGrid, который замораживает первый столбец в DataGrid. Вам нужно использовать его вместо 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 жестко закодированы.

+0

+1 для удивительного кода, но он мерцает, как ад, когда я просматриваю (горизонтально) таблицу. Любые идеи, чтобы сделать прокрутку гладкой. – EMM

Смежные вопросы