拖放行primefaces数据表/数据网格? [英] Drag and drop of rows primefaces datatable/datagrid?

问题描述

我尝试使用 primefaces 数据表/数据网格拖放行.但这是 primefaces 中的问题.将 primefaces 数据表/数据网格的拖放与 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".在执行 JavaScript 方法 doReorder() 期间更新了一个隐藏变量 order_q:

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 类应该包含一个字符串字段 order(当然还有 getter 和 setter).该变量将存储来自 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;
    }

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

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/

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