1

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

4

3 回答 3

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

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/

于 2014-01-30T17:59:30.310 回答
1

只需使用

<p:dataTable draggableRows="true"

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

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

http://www.primefaces.org/documentation

于 2014-08-27T15:49:56.077 回答
0

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

于 2013-12-11T12:05:27.770 回答