Question

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

Answer 1

您需要在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组件添加一些代码。您会看到一个新行，其中行的编号为value，属性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字段 order （当然还有getter和setter）。变量wil存储来自JavaScript的值 - 列表的新顺序（Datatable小部件的源数据）。我们还需要实现xhtml中提到的方法 - 重新排序（）来处理来自“提交订单”按钮的操作

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;
    }

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

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

Answer 2

只需使用

<p:dataTable draggableRows="true"

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

draggableRows |假|布尔|启用后，可以使用dragdrop重新排序行。

http://www.primefaces.org/documentation

Answer 3

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

行拖拽行数据/ datgrid？

3 个答案: