Jquery primefaces datatable中的可拖动行-保存表顺序的方法？

我试图在primefaces中的datatable上实现可拖动的行。我知道Primefaces在“计划在未来发布”的数据表中有可拖动的行。我目前正试图找到一些方法来实现这个功能

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

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

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

类似于上一篇文章中实现的内容：。但是 我想在按下下面的“保存”按钮时保存表一次，而不是每次交换行时都这样做。这有可能实现吗

---

谢谢。

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

基本上，您所要做的就是将重新排序的列表索引的计算与命令按钮的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>

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

}

托管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>

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

}

---

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

基本上，您所要做的就是将重新排序的列表索引的计算与命令按钮的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>

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

}

托管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>

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

}

---

将它添加到您的xhtml文件中，它将非常有效。它可能会帮助其他使用primefaces 4.0或更低版本的用户

<script type="text/javascript">
            jQuery(function() {
                jQuery('.ui-datatable tbody').sortable();
            });
</script>

jQuery（函数（）{
jQuery（'.ui datatable tbody'）.sortable（）；
});

将此文件添加到xhtml文件中，它将非常有效。它可能对其他使用primefaces 4.0或更低版本的用户有所帮助

<script type="text/javascript">
            jQuery(function() {
                jQuery('.ui-datatable tbody').sortable();
            });
</script>

jQuery（函数（）{
jQuery（'.ui datatable tbody'）.sortable（）；
});

谢谢！这是非常有帮助的，我想问题是我没有足够的理解论坛帖子中的实现，无法将其正确地绑定到点击按钮上。谢谢！这是非常有帮助的，我认为问题是我没有足够的理解论坛帖子中的实现，无法将它正确地绑定到点击按钮上。