java中5%3_java - 如何在GXT 3.x中实现冻结列？ - 堆栈内存溢出

基本思想是您需要两个不同的滚动容器，一个包含固定列，另一个包含滚动列。 这些中的每一个都需要位于不同的视口中，因此标准的Grid / GridView不能很好地处理它 - 它们对滚动应该如何表现做出假设，因此简单地子类化一个或两个可能是相当复杂的。

相反，您可以构建两个网格，一个用于锁定列，一个用于滚动列。 每个人都可以处理他们自己的ColumnConfig类，绘制标题和行，并链接到同一个ListStore以确保他们的数据同步 - 商店中的更改将传递给两个监听网格。

为了获得完整的效果，需要一些额外的布线：

链接滚动。 从每个Grid收听BodyScrollEvent ，并将另一个滚动到同一个地方(仅更改top ，而不是left ，因为您不希望控制另一个)。

大小调整是第二大部分 - 两个网格都需要它们的可滚动高度相同，但是当实际显示滚动条时，水平滚动需要底部的缓冲区。 通常，Grid会根据其父级的指令进行调整，但有时您会直接调整Grid的大小 - 在这种情况下，不需要执行此步骤，只需稍微改变两个网格的大小。 否则，您需要构建布局以正确配置它。

最后，锁定的列需要隐藏其垂直滚动条 - 用户无需看到两个垂直滚动条。

这涵盖了基本用例，但没有处理替代GridView实现之类的事情 - GroupingView和子类将需要链接扩展(并隐藏组标题，以便它们不会出现两次，再加上处理组的事实当后半部分向侧面滚动时，行不应该被拆分)， TreeGridView和TreeGrid将需要链接扩展节点并隐藏第二个网格中的树+/-图标。

为了避免混淆问题，我删除了该网格中的许多其他功能，例如工具提示和更改选择模型：

public class GridExample implements IsWidget, EntryPoint {

private static final StockProperties props = GWT.create(StockProperties.class);

private ContentPanel root;

@Override

public Widget asWidget() {

if (root == null) {

final NumberFormat number = NumberFormat.getFormat("0.00");

ColumnConfig nameCol = new ColumnConfig(props.name(), 50, SafeHtmlUtils.fromTrustedString("Company"));

ColumnConfig symbolCol = new ColumnConfig(props.symbol(), 100, "Symbol");

ColumnConfig lastCol = new ColumnConfig(props.last(), 75, "Last");

ColumnConfig changeCol = new ColumnConfig(props.change(), 100, "Change");

changeCol.setCell(new AbstractCell() {

@Override

public void render(Context context, Double value, SafeHtmlBuilder sb) {

String style = "style='color: " + (value < 0 ? "red" : "green") + "'";

String v = number.format(value);

sb.appendHtmlConstant("" + v + "");

}

});

ColumnConfig lastTransCol = new ColumnConfig(props.lastTrans(), 100, "Last Updated");

lastTransCol.setCell(new DateCell(DateTimeFormat.getFormat("MM/dd/yyyy")));

List> l = new ArrayList>();

//Remove name from main set of columns

// l.add(nameCol);

l.add(symbolCol);

l.add(lastCol);

l.add(changeCol);

l.add(lastTransCol);

//create two column models, one for the locked section

ColumnModel lockedCm = new ColumnModel(Collections.>singletonList(nameCol));

ColumnModel cm = new ColumnModel(l);

ListStore store = new ListStore(props.key());

store.addAll(TestData.getStocks());

root = new ContentPanel();

root.setHeadingText("Locked Grid Sample");

root.setPixelSize(600, 300);

final Resizable resizable = new Resizable(root, Dir.E, Dir.SE, Dir.S);

root.addExpandHandler(new ExpandHandler() {

@Override

public void onExpand(ExpandEvent event) {

resizable.setEnabled(true);

}

});

root.addCollapseHandler(new CollapseHandler() {

@Override

public void onCollapse(CollapseEvent event) {

resizable.setEnabled(false);

}

});

//locked grid

final Grid lockedGrid = new Grid(store, lockedCm) {

@Override

protected Size adjustSize(Size size) {

//this is a tricky part - convince the grid to draw just slightly too wide

//and so push the scrollbar out of sight

return new Size(size.getWidth() + XDOM.getScrollBarWidth() - 1, size.getHeight());

}

};

lockedGrid.setView(new GridView(){{

this.scrollOffset=0;

}});

//require columns to always fit, preventing scrollbar

lockedGrid.getView().setForceFit(true);

//main grid, with horiz scrollbar

final Grid grid = new Grid(store, cm);

//don't want this feature, want to encourage horizontal scrollbars

// grid.getView().setAutoExpandColumn(nameCol);

grid.getView().setStripeRows(true);

grid.getView().setColumnLines(true);

grid.setBorders(false);

grid.setColumnReordering(true);

grid.setStateful(true);

grid.setStateId("gridExample");

//link scrolling

lockedGrid.addBodyScrollHandler(new BodyScrollHandler() {

@Override

public void onBodyScroll(BodyScrollEvent event) {

grid.getView().getScroller().scrollTo(ScrollDirection.TOP, event.getScrollTop());

}

});

grid.addBodyScrollHandler(new BodyScrollHandler() {

@Override

public void onBodyScroll(BodyScrollEvent event) {

lockedGrid.getView().getScroller().scrollTo(ScrollDirection.TOP, event.getScrollTop());

}

});

HorizontalLayoutContainer gridWrapper = new HorizontalLayoutContainer();

root.setWidget(gridWrapper);

//add locked column, only 300px wide (in this example, use layouts to change how this works

HorizontalLayoutData lockedColumnLayoutData = new HorizontalLayoutData(300, 1.0);

//this is optional - without this, you get a little offset issue at the very bottom of the non-locked grid

lockedColumnLayoutData.setMargins(new Margins(0, 0, XDOM.getScrollBarWidth(), 0));

gridWrapper.add(lockedGrid, lockedColumnLayoutData);

//add non-locked section, taking up all remaining width

gridWrapper.add(grid, new HorizontalLayoutData(1.0, 1.0));

}

return root;

}

@Override

public void onModuleLoad() {

RootPanel.get().add(asWidget());

}

}

有一些问题(锁定列和未锁定列之间没有线，锁定列标题菜单上下文图标稍微不合适)，但它覆盖了大部分细节而没有太多麻烦，并且几乎所有它都对配置开放 - 想要锁到底？ 只需移动修改 - 想要多个锁定列？ 只需向lockedCm添加更多内容即可。