在我們的JSF應用程序的某個頁面中，用戶看到一個列出許多對象的表格，我們將其稱爲「作業」。假設每個作業都有一個優先級，這只是一個數字，在這個屏幕中用戶可以編輯作業的優先級。JSF中「優先級表」的組件？
但是，兩個作業不能具有相同的優先級編號。出於這個原因，我發現很難建立一個合適的用戶界面來處理優先級設置。
我們在開始時嘗試了一個簡單的編輯框，但它很快就清楚地表明它吸引了：如果用戶想要將作業的優先級從100降低到50，他將不得不手動「爲該作業騰出空間」通過添加1作業50到99.
現在我正在考慮一個表，其中用戶可以拖動行，以視覺調整優先級，而不必擺弄優先數字（實際上從來沒有看到它們），但我找不到這樣的組件。有人知道這樣的組件或有更好的UI建議嗎？
我不認爲你會發現一個組件會改變你的優先編號。相反，您應該調用重新排序例程，以便在更改優先級後相應地更新優先級編號。
關於拖放，我建議你看看RichFaces或ICEFaces。 RichFaces在實現你正在談論的事情方面有一些非常好的功能。我建議你看看RichFaces demo page並試用拖放支持組件。 RichFaces組件集還有一個訂購列表（在Rich Selects下），但它似乎不允許通過輸入數字來改變排序，而是使用向上和向下按鈕完成。
以目前的想法和讓電腦做空間的工作如何？
如果用戶輸入50，則顯示該作業存在的警告，詢問他們是否希望在當前編號50之前或之後插入新作業，或者是否希望完全取消該作業。如果他們選擇插入條目，則可以用代碼重新排序其他項目。
查看jQuery table drag'n'drop plugin。然後，只需使用Ajax將產生的JavaScript調用連接到您的後端（例如，來自Richfaces的a4j：jsFunction）。獲取後端Bean來處理後續作業的洗牌。
這絕對會比現在在JSF庫中找到的任何開箱即用的組件更好看，並且表現得更好。
我想我會去看看你是否可以用開箱即用的組件和script.aculo.us來做到這一點。這是可能的，但是要讓它看起來不錯並且提供一個漂亮的用戶界面會有一些工作。
演示觀點：
<?xml version="1.0" encoding="ISO-8859-1" ?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.0"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<jsp:directive.page language="java"
contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1" />
<jsp:text>
<![CDATA[ <?xml version="1.0" encoding="ISO-8859-1" ?> ]]>
</jsp:text>
<jsp:text>
<![CDATA[ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ]]>
</jsp:text>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Sortable</title>
<script src="javascripts/prototype.js" type="text/javascript">/**/</script>
<script src="javascripts/scriptaculous.js" type="text/javascript">/**/</script>
</head>
<body>
<f:view>
<h:form>
<h:dataTable id="table1" binding="#{jobPageBean.table}"
value="#{jobBean.jobs}" var="row" border="1">
<h:column>
<f:facet name="header">
<h:outputText value="jobs" />
</f:facet>
<h:outputText value="#{row.text}" />
<h:inputHidden value="#{row.priority}">
<f:convertNumber integerOnly="true" />
</h:inputHidden>
</h:column>
</h:dataTable>
<h:commandButton id="ucb1" binding="#{jobPageBean.updateCommandButton}"
action="#{jobBean.updatePriorities}" value="Save New Priority Order"
disabled="true" />
</h:form>
<h:form>
<h:inputTextarea value="#{jobBean.newJob}" />
<h:commandButton action="#{jobBean.addNewJob}" value="Add Job" />
</h:form>
</f:view>
<script type="text/javascript"> /* <![CDATA[ */
Sortable.create('${jobPageBean.tableClientId}:tbody_element', {tag: 'tr', onChange: sortElements});
function sortElements() {
var table = document.getElementById('${jobPageBean.tableClientId}');
var inputs = table.getElementsByTagName('input');
for(var i=0; i<inputs.length; i++) {
inputs[i].value = i;
}
var updateCommandButton = document.getElementById('${jobPageBean.updateCommandButtonClientId}');
updateCommandButton.disabled = false;
}
/* ]]> */
</script>
</body>
</html>
</jsp:root>
豆類：
public class JobPageBean {
// Declaration:
// <managed-bean>
// <managed-bean-name>jobPageBean</managed-bean-name>
// <managed-bean-class>job.JobPageBean</managed-bean-class>
// <managed-bean-scope>request</managed-bean-scope>
// </managed-bean>
private UIComponent dataTable;
private UIComponent updateCommandButton;
public void setTable(UIComponent dataTable) {
this.dataTable = dataTable;
}
public UIComponent getTable() {
return dataTable;
}
public String getTableClientId() {
FacesContext context = FacesContext
.getCurrentInstance();
return dataTable.getClientId(context);
}
public void setUpdateCommandButton(
UIComponent updateCommandButton) {
this.updateCommandButton = updateCommandButton;
}
public UIComponent getUpdateCommandButton() {
return updateCommandButton;
}
public String getUpdateCommandButtonClientId() {
FacesContext context = FacesContext
.getCurrentInstance();
return updateCommandButton.getClientId(context);
}
}
public class JobBean {
// Declaration:
// <managed-bean>
// <managed-bean-name>jobBean</managed-bean-name>
// <managed-bean-class>job.JobBean</managed-bean-class>
// <managed-bean-scope>session</managed-bean-scope>
// </managed-bean>
private List<Job> jobs;
private DataModel model;
private String newJob;
public DataModel getJobs() {
if (jobs == null) {
jobs = new ArrayList<Job>();
model = new ListDataModel(jobs);
}
return model;
}
public String updatePriorities() {
if (jobs != null) {
Collections.sort(jobs);
}
return null;
}
public String getNewJob() {
return newJob;
}
public void setNewJob(String newJob) {
this.newJob = newJob;
}
public String addNewJob() {
if (newJob == null || newJob.trim().length() == 0) {
return null;
}
Job job = new Job();
job.setText(newJob);
job.setPriority(jobs.size());
jobs.add(job);
newJob = null;
return null;
}
}
public class Job implements Comparable<Job> {
private String text;
private int priority;
public String getText() {
return text;
}
public void setText(String text) {
this.text = text;
}
public int getPriority() {
return priority;
}
public void setPriority(int priority) {
this.priority = priority;
}
public int compareTo(Job other) {
if (other.priority == priority) {
return 0;
}
return other.priority < priority ? 1 : -1;
}
}
這肯定是一種可能性。 – 2009-04-08 16:26:38