我正在尝试使用复选框构建一个 treeSelectView 。它实现了 HasValue ，因此setValue移交了应该选中复选框的节点列表。每当调用该函数时，都会检查这些复选框。这是最糟糕的部分。当 treeSelectView 到达客户端时，将https://localhost:8443/VAADIN/static/client/client-BF4676DDAFDA5E40AE93EFEB692AAAD5.cache.js调用具有该名称的脚本，该脚本将树中的所有复选框设置为未选中。这是日志输出：
Sending xhr message to server: {"csrfToken":"8eb266a3-ec2b-4238-9d2e-00da55a02c27","rpc":[{"type":"mSync","node":313,"feature":1,"property":"selected","value":false},{"type":"mSync","node":307,"feature":1,"property":"selected","value":false},{"type":"mSync","node":301,"feature":1,"property":"selected","value":false},{"type":"mSync","node":295,"feature":1,"property":"selected","value":false},{"type":"mSync","node":289,"feature":1,"property":"selected","value":false},{"type":"mSync","node":283,"feature":1,"property":"selected","value":false},{"type":"mSync","node":277,"feature":1,"property":"selected","value":false},{"type":"mSync","node":271,"feature":1,"property":"selected","value":false},{"type":"mSync","node":265,"feature":1,"property":"selected","value":false},{"type":"mSync","node":259,"feature":1,"property":"selected","value":false},{"type":"mSync","node":253,"feature":1,"property":"selected","value":false},{"type":"mSync","node":247,"feature":1,"property":"selected","value":false},{"type":"mSync","node":241,"feature":1,"property":"selected","value":false},{"type":"mSync","node":235,"feature":1,"property":"selected","value":false},{"type":"mSync","node":229,"feature":1,"property":"selected","value":false},{"type":"mSync","node":223,"feature":1,"property":"selected","value":false},{"type":"mSync","node":217,"feature":1,"property":"selected","value":false},{"type":"mSync","node":211,"feature":1,"property":"selected","value":false},{"type":"mSync","node":205,"feature":1,"property":"selected","value":false},{"type":"mSync","node":199,"feature":1,"property":"selected","value":false},{"type":"mSync","node":193,"feature":1,"property":"selected","value":false},{"type":"mSync","node":187,"feature":1,"property":"selected","value":false},{"type":"mSync","node":181,"feature":1,"property":"selected","value":false},{"type":"mSync","node":175,"feature":1,"property":"selected","value":false},{"type":"mSync","node":169,"feature":1,"property":"selected","value":false},{"type":"mSync","node":163,"feature":1,"property":"selected","value":false},{"type":"mSync","node":157,"feature":1,"property":"selected","value":false},{"type":"mSync","node":151,"feature":1,"property":"selected","value":false},{"type":"mSync","node":145,"feature":1,"property":"selected","value":false},{"type":"mSync","node":139,"feature":1,"property":"selected","value":false},{"type":"mSync","node":133,"feature":1,"property":"selected","value":false},{"type":"mSync","node":127,"feature":1,"property":"selected","value":false},{"type":"mSync","node":121,"feature":1,"property":"selected","value":false},{"type":"mSync","node":115,"feature":1,"property":"selected","value":false},{"type":"mSync","node":109,"feature":1,"property":"selected","value":false},{"type":"mSync","node":103,"feature":1,"property":"selected","value":false},{"type":"mSync","node":97,"feature":1,"property":"selected","value":false},{"type":"mSync","node":91,"feature":1,"property":"selected","value":false},{"type":"mSync","node":85,"feature":1,"property":"selected","value":false},{"type":"mSync","node":79,"feature":1,"property":"selected","value":false},{"type":"mSync","node":73,"feature":1,"property":"selected","value":false},{"type":"mSync","node":67,"feature":1,"property":"selected","value":false},{"type":"mSync","node":61,"feature":1,"property":"selected","value":false},{"type":"mSync","node":55,"feature":1,"property":"selected","value":false},{"type":"mSync","node":49,"feature":1,"property":"selected","value":false},{"type":"mSync","node":43,"feature":1,"property":"selected","value":false},{"type":"mSync","node":37,"feature":1,"property":"selected","value":false},{"type":"mSync","node":31,"feature":1,"property":"selected","value":false},{"type":"mSync","node":25,"feature":1,"property":"selected","value":false},{"type":"mSync","node":19,"feature":1,"property":"selected","value":false}],"syncId":1,"clientId":1}
这是完全出乎意料和不受欢迎的行为。谁能告诉我为什么会这样？
更新
这是我的 TreeSelectItem：
<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../../bower_components/vaadin-checkbox/src/vaadin-checkbox.html">
<link rel="import" href="../../../bower_components/vaadin-button/src/vaadin-button.html">
<dom-module id="tree-select-item">
<template>
<style>
#currentItemContainer{
background-color: var(--lumo-contrast-10pct);
border-radius: var(--lumo-border-radius);
padding: 5px;
margin: 3px;
overflow: auto;
}
.hidden{
display: none;
}
</style>
<div id="currentItemContainer" style$="{{_getStyle(level)}}" class$="{{_isHidden(hidden)}}">
<div style="width: 90px; float: left">
<vaadin-checkbox id="checkbox" checked="{{selected}}" indeterminate="{{indeterminate}}" disabled="{{readOnly}}"></vaadin-checkbox>
<vaadin-button class$="{{_isToggleHidden(hasDescendents)}}" theme="icon" on-click="collapse" style="--lumo-button-size: var(--lumo-size-xs);">
<iron-icon icon="{{_getCollapseToggle(collapsed)}}" slot="prefix"></iron-icon>
</vaadin-button>
</div>
<div id="layout" float: left></div>
</div>
</template>
<script>
{
class TreeSelectItem extends Polymer.Element {
static get is() {
return 'tree-select-item';
}
/* collapse(){
this.collapsed = !this.collapsed;
var parentElement = this.parentNode.__dataHost;
parentElement.collapse(this.id,this.collapsed);
} */
_getCollapseToggle(collapsed){
return collapsed ? "lumo:angle-right" : "lumo:angle-down";
}
_isToggleHidden(hidden){
return !hidden ? "hidden" : "";
}
_isHidden(hidden){
return hidden ? "hidden" : "";
}
_getStyle(marginFactor){
return "margin-left:"+(20*marginFactor)+"px;";
}
}
window.customElements.define(TreeSelectItem.is, TreeSelectItem);
}
</script>
</dom-module>
这是java部分
@Data
@Tag("tree-select-item")
@HtmlImport("base/template/component/tree-select-item.html")
public class TreeSelectItem<T extends BasicTreeObject<T>> extends PolymerTemplate<TreeSelectItemTemplateModel> {
/**
* The element containing this item
*/
private TreeSelect<T> treeSelect;
private T item;
@Id("layout")
private Div layout;
@Id("checkbox")
private Checkbox checkbox;
public TreeSelectItem(T item, TreeSelect<T> treeSelect) {
setCollapsed(false);
setSelected(false);
getModel().setLevel(item.getLevel());
getModel().setId(item.getId().intValue());
getModel().setHasDescendents(CollectionUtils.isNotEmpty(item.getChildren()));
getModel().setHidden(false);
getModel().setReadOnly(false);
this.treeSelect = treeSelect;
this.item = item;
render();
}
public void render() {
layout.removeAll();
Component label = treeSelect.getItemRenderer().createComponent(item);
layout.add(label);
}
@EventHandler
public void collapse() {
treeSelect.collapse(this);
}
public void setCollapsed(boolean collapsed) {
getModel().setCollapsed(collapsed);
}
public boolean isCollapsed() {
return getModel().isCollapsed();
}
public void setSelected(boolean selected) {
setIndeterminate(false);
getModel().setSelected(selected);
}
public boolean isSelected() {
return getModel().isSelected();
}
public void addSelectionListener(PropertyChangeListener listener) {
getElement().addPropertyChangeListener("selected", listener);
}
public void setHidden(boolean hidden) {
getModel().setHidden(hidden);
}
public void setIndeterminate(boolean indeterminate) {
getModel().setIndeterminate(indeterminate);
}
public void setReadOnly(boolean readOnly) {
getModel().setReadOnly(readOnly);
}
public String toString() {
return this.item.toString();
}
}
这是设置值的函数：
@Override
public void setValue(List<T> value) {
for (TreeSelectItem<T> tsi : this.treeSelectItems) {
tsi.setSelected(value.contains(tsi.getItem()));
}
updateParentNodesCheckbox();
}