Vaadin 瓦丁网格行索引

在瓦丁桌上，如果我们这样做

table.setRowHeaderMode(RowHeaderMode.INDEX);

我们得到一个具有行索引的列

---

有可能用vaadin网格实现同样的效果吗？

到目前为止，我还没有看到这样的选项，但你应该可以用它来伪装。请参阅下面一个简单的实现，它应该会让您开始（欢迎您提出改进和建议）：

//我们的网格有一个bean项容器
网格=新网格（）；
BeanItemContainer=新的BeanItemContainer（Person.class）；
//包装bean项容器，以便生成一个假标题列
GeneratedPropertyContainer包装容器=新GeneratedPropertyContainer（容器）；
wrappingContainer.addGeneratedProperty（“rowHeader”，新属性ValueGenerator（））{
私人长指数=0；
@凌驾
公共长getValue（项、对象项ID、对象属性ID）{
返回索引++；
}
@凌驾
公共类getType（）{
返回Long.class；
}
});
//将数据源指定给网格并设置所需的列顺序
grid.setContainerDataSource（包装容器）；
setColumnOrder（“行标题”、“名称”、“姓氏”）；
//稍微调整一下-肯定需要更多调整
grid.getColumn（“rowHeader”）.setHeaderCaption（“”）。setHidable（false）。setEditable（false）。setResizeable（false）。setWidth（30）；
//冻结假标题列以防止其水平滚动
grid.setFrozenColumnCount（1）；
//添加虚拟数据
布局。添加组件（网格）；
对于（int i=0；i<20；i++）{
container.addBean（新的Person（“Person”+i，“姓氏”+i））；
}

这将生成类似下图的内容：

---

到目前为止，我还没有看到这样的选项，但你应该可以用它来伪装。请参阅下面一个简单的实现，它应该会让您开始（欢迎您提出改进和建议）：

//我们的网格有一个bean项容器
网格=新网格（）；
BeanItemContainer=新的BeanItemContainer（Person.class）；
//包装bean项容器，以便生成一个假标题列
GeneratedPropertyContainer包装容器=新GeneratedPropertyContainer（容器）；
wrappingContainer.addGeneratedProperty（“rowHeader”，新属性ValueGenerator（））{
私人长指数=0；
@凌驾
公共长getValue（项、对象项ID、对象属性ID）{
返回索引++；
}
@凌驾
公共类getType（）{
返回Long.class；
}
});
//将数据源指定给网格并设置所需的列顺序
grid.setContainerDataSource（包装容器）；
setColumnOrder（“行标题”、“名称”、“姓氏”）；
//稍微调整一下-肯定需要更多调整
grid.getColumn（“rowHeader”）.setHeaderCaption（“”）。setHidable（false）。setEditable（false）。setResizeable（false）。setWidth（30）；
//冻结假标题列以防止其水平滚动
grid.setFrozenColumnCount（1）；
//添加虚拟数据
布局。添加组件（网格）；
对于（int i=0；i<20；i++）{
container.addBean（新的Person（“Person”+i，“姓氏”+i））；
}

这将生成类似下图的内容：

---

好吧，我花了很长时间才弄明白这一点。我不知道您为什么需要这个，但是如果您的目的是查找单击了哪个网格行，那么您可以通过侦听器的

itemClick

事件从控件的数据源获取索引

在我的例子中，我的数据源是一个

SQLContainer

，我已经有了它（请参见

ds

var），所以我这样做：

grid.addListener(new ItemClickEvent.ItemClickListener() {
    @Override
    public void itemClick(ItemClickEvent event) {               
        Object itemId = event.getItemId();
        int indexOfRow = ds.indexOfId(itemId);                      
    }       
});

通常在初始化控件时，通过构造函数或设置属性将数据源添加到控件中。如果您从某个已经连接了数据源的地方获得网格，您总是可以通过以下方式获得它：

SQLContainer ds = (SQLContainer)gred.getContainerDataSource();

---

好吧，我花了很长时间才弄明白。我不知道您为什么需要这个，但是如果您的目的是查找单击了哪个网格行，那么您可以通过侦听器的

itemClick

事件从控件的数据源获取索引

在我的例子中，我的数据源是一个

SQLContainer

，我已经有了它（请参见

ds

var），所以我这样做：

grid.addListener(new ItemClickEvent.ItemClickListener() {
    @Override
    public void itemClick(ItemClickEvent event) {               
        Object itemId = event.getItemId();
        int indexOfRow = ds.indexOfId(itemId);                      
    }       
});

通常在初始化控件时，通过构造函数或设置属性将数据源添加到控件中。如果您从某个已经连接了数据源的地方获得网格，您总是可以通过以下方式获得它：

SQLContainer ds = (SQLContainer)gred.getContainerDataSource();

---

现在有一个网格渲染器可用于执行此操作。它位于网格渲染器附加组件中。它也与Vaadin 8兼容

下面是它的使用方法（对于如何呈现索引，有几个不同的选项）。

---

grid.addColumn（值->”，新的RowIndexRenderer（））.setCaption（“行索引”）
现在可以使用一个网格渲染器来执行此操作。它位于网格渲染器附加组件中。它也与Vaadin 8兼容

下面是它的使用方法（对于如何呈现索引，有几个不同的选项）。
grid.addColumn（值->”，新的RowIndexRenderer（））.setCaption（“行索引”）
我使用这个技巧：

int i = 0;    
grid.addComponentColumn(object -> {
                i++;
                return new Label("" + i);
            }).setCaption("");

我使用这个技巧：

int i = 0;    
grid.addComponentColumn(object -> {
                i++;
                return new Label("" + i);
            }).setCaption("");

值得一提的是，我将以下内容用于
Vaadin 18 flow
，效果非常好

grid.addColumn(TemplateRenderer.of("[[index]]")).setHeader("#");

值得一提的是，我将以下内容用于
Vaadin 18 flow
，效果非常好

grid.addColumn(TemplateRenderer.of("[[index]]")).setHeader("#");

最好使用
container.indexOfId（itemId）
，而不是增加
索引。否则，当我们排序网格索引时wrong@pbaris上面的代码只是一个示例。管理该列的值取决于如何实现整个功能。例如，如果您有许多记录，您可能希望从数据库页面（比如20个项）中检索，而不是将它们全部加载到内存中。在这种情况下，即使是
container.indexOfId（itemId）
也可能不正确。相反，基于页码和项目位置的索引将使m