Question

我正在尝试在Primefaces应用程序中实现一些拖放行为，这样你就有了一个p：数据表的记录和一个表示文件夹结构的p：tree。理想情况下，我希望能够将表格中的文档拖到树中的单个文件夹中，但我很难弄清楚你是如何做到这一点的。

从我可以看到，树不支持其他非树组件放入树节点，或者至少我看不到任何表明你可以做到这一点。

Primefaces无法实现此功能，或者有人能指出我从哪里开始的正确方向？

Answer 1

好吧，我设法修改了Primefaces展示中的一个自定义示例，以获得我想要的功能，关键元素如下所示：

XHTML列定义（列中的图像被拖动到文件夹）：

<pf:column headerText="#{bundle['column-header']}">
    <span id="document_#{message.id}">
        <pf:graphicImage value="/svg/document.svg" styleClass="datatable-layout">
            <pf:draggable revert="true" helper="clone" />
        </pf:graphicImage>
    </span>
</pf:column>

表示文件夹结构的树（draggable / droppable属性与此线程中的特定功能无关）：

<pf:tree value="#{backingBean.folderRoot}" var="node" droppable="true" draggable="true">
    <pf:treeNode>
        <h:outputText value="#{node}"/>
    </pf:treeNode>
</pf:tree>

JavaScript使每个树节点都可以删除：

$('.ui-treenode-label').droppable({
    activeClass: 'ui-state-active',
    hoverClass: 'ui-state-highlight',
    tolerance: 'pointer',
    drop: function(event, ui) {
        var folderName = $(this).text();
        var spanId = document.getElementById(ui.draggable[0].id).parentNode.id;

        //span Id is of format document_{documentId}, so we need to discard the characters before the id
        var documentId = spanId.substring(spanId.indexOf("_")+1, spanId.length);

        tableToTree([
             {name: 'folderName', value:  folderName}
            ,{name: 'documentId', value: documentId}
        ]);
    }

 });

以上javascript中引用的远程“tableToTree”命令：

<pf:remoteCommand name="tableToTree" actionListener="#{backingBean.tableToTree}" 
                update="documentTable"/>

最后，支持bean中的方法读取文件夹名称和文档ID，从中可以相应地更新模型：

public void tableToTree() {
    Map<String,String> params = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap();

    System.out.println("folderName=" + params.get("folderName"));
    System.out.println("messageId=" + params.get("messageId"));
}

Primefaces将文档拖到文件夹结构

1 个答案: