拖放行的数组datatable / datagrid？ [英] Drag and drop of rows primefaces datatable/datagrid?

问题描述

我试图使用标号datatable / datagrid拖放行。但是这是在原理中的问题。什么是最好的方法来集成拖放与datetime / datagrid与jquery或其他第三方api插件。

I trying to drag and drop of rows using primefaces datatable/datagrid.But this is issue in primefaces.What is best way to integrate drag and drop of primefaces datatable/datagrid with jquery or other third party api plugin.Please suggesst to me.

推荐答案

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

You need to add some JavaScript (JQuery) in your JSF page to make Datatable sortable and to disable selection mode. Listed below doReorder() method gets the new order of the rows and save to order_q variable:

<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。执行期间有一个隐藏变量order_q JavaScript方法doReorder（）：

Add some code to your Datatable component. You see a new column with number of the row as value with attribute styleClass set to „row" . There is a hidden variable order_q updated during execution JavaScript method doReorder() :

<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 - reorder（）中提到的方法来处理按钮提交订单的操作

Your bean class should contain a String field order (with getters and setters of course). The variable wil store a value from the JavaScript – the new order of our list (source data of the Datatable widget). We need to implement also a method mentioned in the xhtml - reorder() to handle action from button „Submit order"

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，并通过单击按钮保存新订单。我留下我的博客的引用，其中描述了所有这些：

That’s all! Now you can reorder your Datatable using drag&drop feature and save the new order by clicking a button. I leave a reference to my blog where all of this is described:

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

这篇关于拖放行的数组datatable / datagrid？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！