拖放行primefaces数据表/数据网格？答案

【问题标题】：Drag and drop of rows primefaces datatable/datagrid?拖放行primefaces数据表/数据网格？
【发布时间】：2013-06-01 05:11:12
【问题描述】：

我尝试使用 primefaces 数据表/数据网格拖放行。但这是 primefaces 中的问题。将 primefaces 数据表/数据网格的拖放与 jquery 或其他第三方 api 插件集成的最佳方法是什么。请建议我。

【问题讨论】：

你能展示一下你尝试过的东西吗？

标签： jsf-2 primefaces datatable drag-and-drop

【解决方案1】：

据我从我的应用程序中的数据表（primefaces）所知，它们有 2 个主要状态/模式。这可能不是正确的词，但我坚持下去。第一个是只显示，第二个是编辑。（在显示中，我没有看到触发事件，因此 DnD 无法工作。）在编辑时，它们的选择性存在严重问题。你必须按下表格的边缘而不是内联组件到达以获得对行的关注。因此，必须在该区域进行下降，并且仅适用于触发事件。如果您看到这些示例...所有放置都在外部组件（面板等）上进行，并且表刚刚更新，因为 ajax 中的 ondrop 事件已经运行并更改了放置表将包含的数据。这对于增加数据可能很神奇……但对于重新排列和更新单元格或行数据却不是。所以直到primefaces 3.5.x的答案是我认为你不能实现它......我不认为你可以用jquery来做，因为它们运行客户端？我以前没有使用过它们，所以我不能确定。可能需要对表单进行一些修改。

【讨论】：

【解决方案2】：

您需要在 JSF 页面中添加一些 JavaScript (JQuery) 以使 Datatable 可排序 并禁用选择模式。下面列出的 doReorder() 方法获取行的新顺序并保存到 order_q 变量：

<script type="text/javascript">
    $(document).ready(function () {
        $('.ui-datatable tbody').sortable();
        $('.ui-datatable tbody').disableSelection();
    });

    function doReorder() {
        var order = '';
        var len = $('.row').length;
        $('.row').each(function (index) {
            order += ($(this).text() + ((index == (len - 1)) ? '' : ';'));
        });
        $('#order_q').val(order);
        return true;
    }
</script>

向您的 Datatable 组件添加一些代码。您会看到一个新列，其中行号作为值，属性 styleClass 设置为“row”。在执行 JavaScript 方法 doReorder() 期间更新了一个隐藏变量 order_q：

<p:dataTable rowIndexVar="rowIndex"
var="entry" value="#{myBean.list}" >
 <p:column headerText="#">
 <h:outputText styleClass="row" value="#{rowIndex}"/>
 </p:column>
... (other colums as you wish)
</p:dataTable>
<h:inputHidden id="order_q" value="#{myBean.order}"/>
<p:commandButton value="Submit order" ajax="false" onclick="return doReorder()" action="#{myBean.reorder}"/>

您的 bean 类应该包含一个字符串字段 order（当然还有 getter 和 setter）。该变量将存储来自 JavaScript 的值——我们列表的新顺序（Datatable 小部件的源数据）。我们还需要实现 xhtml 中提到的方法 - reorder() 来处理按钮“提交订单”的操作

public String reorder() {
        Map < String, String > tmp = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap();
        String order = tmp.get("order_q");
        if (order != null && !order.isEmpty()) {
            ArrayList < YourData > reordered = new ArrayList < > ();
            for (String s: order.split(";")) {
                try {
                    Integer i = Integer.parseInt(s);
                    YourData data = list.get(i);
                    reordered.add(data);
                } catch (NumberFormatException nfe) {}
            }
            list = reordered;
        }
        return null;
    }

就是这样！现在，您可以使用拖放功能对数据表重新排序，并通过单击按钮保存新订单。我留下了对我的博客的引用，其中描述了所有这些：

http://michalu.eu/wordpress/drag-and-drop-rows-to-reorder-your-datatable-in-primefaces/

【讨论】：

不建议使用主要依赖于链接的答案。您可以在答案中包含方向并将链接作为参考吗？

【解决方案3】：

随便用

<p:dataTable draggableRows="true"

在 Primefaces 5.0 DataTable 文档中，您可以看到参数 draggableRows，如下所示：

draggableRows |假 |布尔值 |启用后，可以使用拖放对行重新排序。

http://www.primefaces.org/documentation

【讨论】：