如何通过复选框选择模式禁用 PrimeFaces 树

Question

我需要在某些情况下禁用 PrimeFaces 树（复选框选择模式）。用户应该能够看到选中和未选中的复选框，但在这种情况下需要禁用它们。有人知道怎么做吗

我正在使用 PrimeFaces 4

Answer 1

您可以为节点设置 userNode.setSelectable(false) 并在 jsf Treetable 添加

showUnselectableCheckbox="true"

Answer 2

我找到了解决方案。但这并不优雅，这可以通过 css 来完成，我们可以向树添加一个条件 css 并使其不可点击。

    .not-clickable {
    cursor: not-allowed;
    pointer-events: none;
}

在树中使用上面的 css 样式并带有条件，

<p:tree id="tree" styleClass="#{not backingBean.editable?'not-clickable':''}" cache="false" value="#{backingBean.treeRoot}" var="node" selectionMode="checkbox" selection="#{backingBean.selectedValuesNodes}">

Answer 3

为要禁用其复选框的节点设置 Node.setSelectable(false)。

Answer 4

我正在使用 primereact，并且禁用了如下所示的复选框。 首先，创建一个自定义 CSS：

.disabled-tree-table-checkbox .p-checkbox-box,
.disabled-tree-table-checkbox .p-checkbox-input {
     pointer-events: none;
     opacity: 0.65;
     border: none;
 }

然后，在您的树节点中，将此类名添加到您要禁用的节点，

const treeNode: TreeNode = {
  key: ...your key,
  data: {
    ...your data
  },
  children: ...your children
  className:  'disabled-tree-table-checkbox',
};