0

Primefacesのデータテーブルにドラッグ可能な行を実装しようとしています。Primefacesには、「将来のリリースで計画されている」データテーブルにドラッグ可能な行があることを知っています。私は現在、この機能を自分で実装する方法を見つけようとしています。

次のjqueryコードを使用して、行をドラッグ可能にしました

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

ただし、ページを離れると、行の順序は保存されません。テーブルを保存するために押されるボタンがあり、行の順序を保存する関数を作成できるかどうかを確認しようとしています。

ここの最後の投稿で実装されているものに似たもの：http：//forum.primefaces.org/viewtopic.php ？f = 3＆t=2678 。ただし、行を入れ替えるたびにこれを行うのではなく、下の[保存]ボタンを押したときにテーブルを1回保存したいと思います。これを実装することは可能ですか？

ありがとうございました。

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ファイルに追加すると完全に機能します。primefaces4.0以下のバージョンを使用している他の人に役立つ可能性があります。

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