0

我正在尝试在 primefaces 的数据表上实现可拖动的行。我知道 Primefaces 在“计划在未来发布”的数据表中有可拖动的行。我目前正在尝试自己寻找某种方法来实现此功能。

我使用以下 jquery 代码使行可拖动

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

但是，一旦您离开页面，这不会保存行的顺序。我有一个按钮被按下来保存表格，我想看看我是否可以编写一个保存行顺序的函数。

类似于此处最后一篇文章中实现的内容：http: //forum.primefaces.org/viewtopic.php?f=3 &t=2678 。但不是每次交换行时都这样做，我想在按下下面的“保存”按钮时保存一次表格。这有可能实现吗？

谢谢你。

4

2 回答 2

3

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

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

观点：

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

}
于 2013-03-09T15:30:29.740 回答
1

将此添加到您的 xhtml 文件中，它将完美运行。它可能对使用 primefaces 4.0 或更低版本的其他人有所帮助。

<script type="text/javascript">
            jQuery(function() {
                jQuery('.ui-datatable tbody').sortable();
            });
</script>
于 2016-03-10T19:18:50.573 回答