struts2 optiontransferselect从数据库中检索和显示值

Lea*_*ner 14 javascript java jquery jsp struts2

在jsp页面中,我<s:optiontransferselect>在左侧和右侧之间有一个交换值和一个保存的提交按钮.

<s:optiontransferselect 
allowUpDownOnLeft="false"
allowUpDownOnRight="false"
allowSelectAll="false"
allowAddAllToLeft="false"
allowAddAllToRight="false"
addToRightLabel="Go to right"
addToLeftLabel="Go to left" 
leftTitle="Left side values"
headerKey="0"
name="option"
list= "optionList"
rightTitle="Right side values"
doubleHeaderKey="0"
doubleList="selectedOptionList" 
doubleName="selectOption"
doubleId="selectedValues"
>
</s:optiontransferselect>

<s:submit />
Run Code Online (Sandbox Code Playgroud)

我运行程序,它实际上可以从右侧保存值.但是它没有显示保存的值.

我正在考虑使用javascript并使用onchange事件<s:optiontransferselect>来实现这一目标

<script>
function show(){
  var list = document.getElementById("selectedValues");

  for (var i = 0; i < list.options.length; i++) {
    //seems something not correct in this part but I am not sure how solve in this way 
     list.options[i].selected = true;
  }

  return true;
}
</script>

<s:optiontransferselect 
allowUpDownOnLeft="false"
allowUpDownOnRight="false"
allowSelectAll="false"
allowAddAllToLeft="false"
allowAddAllToRight="false"
addToRightLabel="Go to right"
addToLeftLabel="Go to left" 
leftTitle="Left side values"
headerKey="0"
name="option"
list= "optionList"
rightTitle="Right side values"
doubleHeaderKey="0"
doubleList="selectedOptionList" 
doubleName="selectOption"
doubleId="selectedValues"

onchange ="show()"> <!-- onchange seems not work here -->
</s:optiontransferselect>
Run Code Online (Sandbox Code Playgroud)

当我运行程序时,右侧仍然无法显示保存的值.

有关optiontransferselect的更多信息,以防它有用.

我有一个动作类.

public class OptionTransferSelectAction extends ActionSupport {
private List<String> optionList;
private List<String> selectedOptionList;
//private String option;
private  List<String> option;
private List<String> selectOption;

public OptionTransferSelectAction (){
    optionList=new ArrayList<String>();
   //display on the left side for selection
    optionList.add("Section A");
    optionList.add("Section B");
    optionList.add("Section C");
    optionList.add("Section D");
    optionList.add("Section E");
    optionList.add("Section F");
    optionList.add("Section G");
    optionList.add("Section H");

    selectedOptionList=new ArrayList<String>();
    //display on the right side
    //pretend it does not have any values in the first time (does not 
    //trigger the save yet)

}   

public List<String> getOptionList() {
    return optionList;
}

public void setOptionList(List<String> optionList) {
    this.optionList = optionList;
}

public List<String> getSelectedOptionList() {
    return selectedOptionList;
}

public void setSelectedOptionList(List<String> selectedOptionList) {
    this.selectedOptionList = selectedOptionList;
}
/*
public String getOption() {
    return option;
}

public void setOption(String option) {
    this.option = option;
}
*/
public List<String> getOption() {
    return option;
}

public void setOption(List<String> option) {
    this.option = option;
}


public List<String> getSelectOption() {
    return selectOption;
}

public void setSelectOption(List<String> selectOption) {
    this.selectOption = selectOption;
}

}
Run Code Online (Sandbox Code Playgroud)

更新

我更改选项从 StringList<String>用适当的getter和setter.我运行代码,optiontransferselect仍然无法显示保存的值.

我做错了哪一部分?有人会告诉我吗?谢谢.

更新 我创建了一个新的jsp,例如success.jsp.如果我选择了一些值来选择选项并单击提交按钮.jsp文件可以显示我刚刚提交的值.我可以在数据库中看到保存的值.但是,optiontransferselect仍然无法显示已保存的值.

success.jsp有一个代码可以显示我刚刚提交的值.

Selected Value(s) : <s:property value="selectOption"/>
Run Code Online (Sandbox Code Playgroud)

在数据库中,我可以看到保存的值,所以我想知道如何让optiontransferselect显示保存的值?

另一个更新

我尝试selectedValues在提交之前使用按钮调用javascript函数来显示 .

<script>
function testshow()
{
  var value = document.getElementById("selectedValues");
  for(var i=0;i<value.options.length; i++)
  {
     alert(value.options[i].innerHTML);
  }
  return true;
}
</script>

//button to call the function
<s:submit onclick="return testshow()"/>
Run Code Online (Sandbox Code Playgroud)

我运行程序,当我按下按钮时,它可以在提交之前显示所选值,所以我仍然不明白为什么optiontransferselect无法保存所选值.

nin*_*our 1

我认为为了解决您的问题,您需要了解两件事:

  1. Struts 操作的生命周期。
  2. 实际如何optiontransferselect运作。

Struts Action 的生命周期

我从这个开始,因为这可能已经解决了你的问题。

为每个请求创建一个新的 Struts 操作实例。

这意味着当您将属性list(左侧)和doubleList(右侧)连接到派生类中的字段时ActionSupport- 就像上面的示例一样OptionTransferSelectAction- 您必须确保使用有意义的值初始化它,我的意思是反映当前的值您想要向用户显示的状态。在最坏的情况下,您必须在每次请求时从数据库中获取值。

或者,您可以将 bean 注入到具有专用生命周期的操作中(例如会话范围)。我可能会在另一篇文章中阐述这一点。

(顺便说一句,如果其他人可以提供更多信息,如果可以直接更改 Struts 操作的生命周期,我将不胜感激)。


如何optiontransferselect运作

该标签包含两个select标签(或更具体地说是updownselect标签)。我先把它的功能列出来,因为这样可以让我们更好的理解optiontransferselect。(旁注:与 JSF 相反,Struts 明确区分了 get 和 set 操作的属性。)

要将select标签与基础数据连接起来,需要三个相关属性:

  1. list- 这是所有可用值的列表(=get)。
  2. value- 这是最初选择的值列表(=get)。
  3. name-将在表单提交 (=set) 上提供所选值的操作的属性(字段)名称。

因此,您的操作将收到的唯一属性是与 相关的属性name。该select标签不会...

  • ...将完整的值列表( 的值list)回发给操作。
  • ...更改底层 Java 类/操作中list和的值。value

对于 也是如此optiontransferselect。这使得语义相当奇怪,因为一些更改(即哪些值显示在左侧,哪些值显示在右侧)永远不会被回发到 Struts 操作,您只能获取两侧的选定值。

主要区别在于您现在两次拥有这三个属性:

  1. list -->list左侧和doubleList右侧。
  2. value -->value左侧和doubleValue右侧。
  3. name -->name左侧和doubleName右侧。

现在的问题是如何才能只获得选定的值?我建议在提交之前自动选择它们:

<s:submit value="Save" onclick="selectAllOptions(document.getElementById('idLeft'));selectAllOptions(document.getElementById('idRight'));"/>
Run Code Online (Sandbox Code Playgroud)

其中对应的是optiontransferselect 中idLeft的值,对应的是 的值。通过这一更改,您将分别获得和中左值和右值的完整列表。ididRightdoubleIdnamedoubleName

该代码与您将使用的按钮完全相同,allowSelectAll="true"并且 JavaScript 方法selectAllOptions由 Struts 通过 提供optiontransferselect.js,无论 allowedSelectAll 为 true 或 false。