Question

我想将用户可以选择的行数限制为4，并且要求至少选择1行。可以使用Primefaces DataTable完成吗？

Answer 1

这可以使用Primefaces Datatable轻松完成。我在下面为你做了一个例子

XHTML代码：

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.org/ui">

<h:head>
    <title>Test</title>
</h:head>

<h:body>

    <h:form id="form">

        <p:dataTable value="#{tBean.availablePersonList}" var="person" id="table"
            selection="#{tBean.selectedPersonList}" selectionMode="multi"
            rowKey="#{person.name}">
            <p:ajax event="rowSelect" listener="#{tBean.rowSelect}" update=":form:table"/>
            <p:column headerText="Name">
            #{person.name}
            </p:column>


            <p:column headerText="Address">
            #{person.address}
            </p:column>


        </p:dataTable>

        <p:commandButton value="Submit" actionListener="#{tBean.submit}"></p:commandButton>

    </h:form>
</h:body>
</html>

人员类

public class Person {

    private String name;
    private String address;


    public Person(String name, String address) {
        super();
        this.name = name;
        this.address = address;
    }

    public String getName() {
        return name;
    }

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

    public String getAddress() {
        return address;
    }

    public void setAddress(String address) {
        this.address = address;
    }

}

ManagedBean代码：

import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;

import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
import javax.faces.event.ActionEvent;

import org.primefaces.context.RequestContext;
import org.primefaces.event.SelectEvent;

@ManagedBean(name = "tBean")
@ViewScoped
public class TestBean implements Serializable {

    private List<Person> availablePersonList;
    private List<Person> selectedPersonList;

    public TestBean() {
        availablePersonList = new ArrayList<Person>();
        availablePersonList.add(new Person("John", "London"));
        availablePersonList.add(new Person("Pat", "London"));
        availablePersonList.add(new Person("Meerkut", "Houston"));
        availablePersonList.add(new Person("Ali", "London"));
        availablePersonList.add(new Person("Parker", "Edinburgh"));
        availablePersonList.add(new Person("Laurent", "Paris"));

    }

    public void submit(ActionEvent e) {

        if (selectedPersonList.size() < 1) {
            RequestContext.getCurrentInstance().showMessageInDialog(new FacesMessage("Select at least one item"));
            return;
        }

    }

    public void rowSelect(SelectEvent event) {
        System.out.println(selectedPersonList.size());
        if (selectedPersonList.size() > 3) {
            selectedPersonList.remove(event.getObject());
            RequestContext.getCurrentInstance().showMessageInDialog(new FacesMessage("You cannot selected more than 3"));

            return;
        }
    }

    public List<Person> getAvailablePersonList() {
        return availablePersonList;
    }

    public void setAvailablePersonList(List<Person> availablePersonList) {
        this.availablePersonList = availablePersonList;
    }

    public List<Person> getSelectedPersonList() {
        return selectedPersonList;
    }

    public void setSelectedPersonList(List<Person> selectedPersonList) {
        this.selectedPersonList = selectedPersonList;
    }

}

结果：

When having not selected one

Maximum

Answer 2

在这个例子中，我们迭代所有复选框并为每个复选框添加一个click事件监听器。如果单击复选框，则我们检查选定的行数。

<h:form id="form">
    <p:dataTable var="car" value="#{listBean.cars}"
                 selection="#{listBean.selectedCars}"
                 rowKey="#{car.id}"
                 paginator="true" rows="10"
                 widgetVar="myDataTable">

        <p:column selectionMode="multiple" style="width:2%;text-align:center"/>

        <p:column headerText="Id">
            <h:outputText value="#{car.id}"/>
        </p:column>
        <p:column headerText="Year">
            <h:outputText value="#{car.year}"/>
        </p:column>
        <p:column headerText="Manufacturer">
            <h:outputText value="#{car.manufacturer}"/>
        </p:column>
        <p:column headerText="Model">
            <h:outputText value="#{car.model}"/>
        </p:column>
        <p:column headerText="Color">
            <h:outputText value="#{car.color}"/>
        </p:column>
    </p:dataTable>

    <script type="text/javascript">
        var MAX_ROW_SELECTION_COUNT = 4;

        $(function () {
            if (myDataTable.isSelectionEnabled()) {
                var dataTableId = myDataTable.jqId;

                // hide check all button
                $(dataTableId + ' thead:first > tr > th.ui-selection-column .ui-chkbox-all').hide();

                var checkboxes = $(dataTableId + ' tbody.ui-datatable-data:first > tr > td.ui-selection-column .ui-chkbox-box');

                checkboxes.each(function (index, element) {
                    var chckbx = $(element);
                    console.log(chckbx);

                    chckbx.on("click", function (e) {
                        var disabled = chckbx.hasClass('ui-state-disabled'),
                                checked = chckbx.hasClass('ui-state-active');

                        if (!(checked || disabled)) {
                            if (myDataTable.getSelectedRowsCount() >= MAX_ROW_SELECTION_COUNT) {
                                alert('You cannot select more than ' + MAX_ROW_SELECTION_COUNT +' rows.');
                                return false;
                            }
                        }
                    });
                });
            }
        });
    </script>
</h:form>

如何限制用户可以从Primefaces数据表中选择的行数？

2 个答案: