在 Vaadin 中为网格的每一行添加一个鼠标侦听器

Question

我的 Web 应用程序中有一个简单的网格，编码如下：

Grid users_list = new Grid();
users_list.addColumn("username", String.class);
users_list.addColumn("email", String.class);

并且我想向将填充网格的每个条目添加一个鼠标侦听器（鼠标左键）。这在 Vaadin 中可行吗？

Answer 1

要么使用 SelectionListener，要么实施纯粹的 JavaScript 解决方案。 SSCCE 为此：

protected void init(VaadinRequest request)
{
    VerticalLayout layout = new VerticalLayout();
    Collection<Person> people = new ArrayList<Person>();
    people.add(new Person("Nicolaus Copernicus", 1543));
    people.add(new Person("Galileo Galilei", 1564));
    people.add(new Person("Johannes Kepler", 1571));

    BeanItemContainer<Person> container = new BeanItemContainer<Person>(Person.class, people);
    Grid grid = new Grid(container);
    layout.addComponent(grid);

    com.vaadin.ui.JavaScript.getCurrent().addFunction("rowClicked", new JavaScriptFunction()
    {
        @Override
        public void call(JsonArray arguments)
        {
            System.out.println(arguments.get(0).toString());
        }
    });
    com.vaadin.ui.JavaScript.getCurrent().execute("addRowListener()");

    setContent(layout);
}

JavaScript:

function addRowListener() {
var table = document.getElementsByClassName("v-grid-tablewrapper")[0];
table = table.getElementsByTagName("table")[0];
var rows = table.getElementsByTagName("tr");
for (i = 0; i < rows.length; i++) {
     var currentRow = table.rows[i];
     var createClickHandler = 
     function(row) 
     {
         return function() { 
                                var cell = row.getElementsByTagName("td")[0];
                                    var id = cell.innerHTML;
                                    rowClicked(id);
                           };
     };

    currentRow.onclick = createClickHandler(currentRow);
}
}

您可以使用 MainUI class 顶部的导入 com.vaadin.annotations.JavaScript 注释附加 JavaScript。您需要将 JavaScript 文件与 MainUI class.

放在同一个包中

在 Vaadin 中为网格的每一行添加一个鼠标侦听器

Add a mouse-listener to each row of a grid in Vaadin

java

vaadin