primefaces数据表中的可拖动行-一种保存表顺序的方法吗? [英] Draggable rows in primefaces datatable - a way to save the order of the table?

问题描述

我正在尝试在素数表的数据表上实现可拖动的行.我知道Primefaces在计划将来发布"的数据表中具有可拖动的行.我目前正在尝试寻找一些自己实现此功能的方法.

I am trying to implement draggable rows on a datatable in primefaces. I know that Primefaces has draggable rows in a datatable "planned for a future release". I am currently trying to find some way to implement this functionality myself.

我使用了以下jQuery代码来使行可拖动

I used the following bit of jquery code to make the rows draggable

$(".ui-datatable.sortable tbody").sortable();

但是，一旦离开页面，这不会保存行的顺序.我有一个按下该按钮来保存表的按钮，并且我试图查看是否可以编写一个保存行顺序的函数.

However, this does not save the order of the rows once you leave the page. I have a button that gets pressed to save the table, and I am trying to see if I can write a function that saves the order of rows.

类似于上一篇文章在此处实现的内容: http: //forum.primefaces.org/viewtopic.php?f=3&t=2678 .但 而不是每次交换该行时都要这样做，而是要在按下下面的保存"按钮时保存一次表.这可能实现吗?

Something similar to what is implemented in the last post here: http://forum.primefaces.org/viewtopic.php?f=3&t=2678 . But instead of doing this every time the row is swapped, I want to save the table once, when the "Save" button below is pressed. Is this possible to implement?

谢谢.

推荐答案

如果您已经有答案的提示，我真的不明白您为什么决定发布该问题.但是，由于没人决定接受这个问题的答案，所以我会做.

I don't really understand why you decided to post the question if you already have hints for the answer. But as no one decided to take upon the answer to the question, I'll do it.

基本上，您要做的就是将重新排序的列表索引的计算与命令按钮的onclick事件绑定在一起，并在您的操作方法中获得新的顺序来处理重新排序的列表.我使用了托管bean的专用字段来保持顺序，但是绝对没有必要.下面是该设置的目标.

Basically all you have to do is to tie up the calculation of reordered list indices to an onclick event of your command button and get the new order in your action method to process the reordered list. I used a dedicated field of a managed bean to keep the order, but it is absolutely unnecessary. Below foes the setup.

视图:

<h:head>
    <h:outputScript name="js/pf.js" target="body"/>
    <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.min.js"></script>
</h:head>
<h:body>
    <h:form id="form">
        <p:dataTable id="table" var="data" value="#{sortableDatatableBean.list}" widgetVar="tabSort" rowIndexVar="rowIndex">
            <p:column headerText="##">
                <h:outputText styleClass="row" value="#{rowIndex}"/>
            </p:column>
            <p:column headerText="Name">
                <h:outputText value="#{data.name}" />
            </p:column>
            <p:column headerText="Value">
                <h:outputText value="#{data.value}" />
            </p:column>
        </p:dataTable>
        <h:inputHidden id="order" value="#{sortableDatatableBean.order}"/>
        <p:commandButton value="Submit" ajax="false" onclick="return doOrder()" action="#{sortableDatatableBean.action}"/>
    </h:form>
</h:body>

javascript (pf.js):

$(document).ready(function() {
    $(tabSort.jqId + '.ui-datatable tbody').sortable();
    $(tabSort.jqId + '.ui-datatable tbody').disableSelection();
});

function doOrder() {
    var order = '';
    var len = $('.row').length;
    $('.row').each(function(index) {
        order += ($(this).text() + ((index == (len - 1)) ? '' : ';'));
    });
    $('#form\\:order').val(order);
    return true;
}

托管bean :

@ManagedBean
@RequestScoped
public class SortableDatatableBean {

    private String order = "0;1";//getter+setter
    private List<Data> list;//getter+setter

    public SortableDatatableBean() {
        list = new ArrayList<Data>();
        Data d;
        d = new Data("name", "value");
        list.add(d);
        d = new Data("name1", "value1");
        list.add(d);
    }

    public String action() {
        //String order = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap().get("form:order");
        List<Data> reordered = new ArrayList<Data>();
        for(String s : order.split(";")) {
            try {
                Integer i = Integer.parseInt(s);
                Data data = list.get(i);
                reordered.add(data);
            } catch(NumberFormatException nfe) {
            }
        }
        this.list = reordered;
        return null;
    }

}

模型:

public class Data {

    private String name;
    private String value;

    public Data() {
    }

    public Data(String name, String value) {
        this.name = name;
        this.value = value;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getValue() {
        return value;
    }

    public void setValue(String value) {
        this.value = value;
    }

}

这篇关于primefaces数据表中的可拖动行-一种保存表顺序的方法吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！