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

【问题标题】：How to limit the number of rows a user can select from a Primefaces datatable?如何限制用户可以从 Primefaces 数据表中选择的行数？
【发布时间】：2014-07-20 14:03:28
【问题描述】：

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

【问题讨论】：

标签： jsf primefaces datatable

【解决方案1】：

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

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

}

结果：

【讨论】：

【解决方案2】：

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

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

【讨论】：

你不需要编写 hacky javascript 来实现这一点。
哈哈 :) @Makky 我知道 p:ajax 是可能的。但在您的示例中，数据表将在每次单击复选框后呈现。在这种情况下，我认为性能会很差。