加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

Wicket Ajax将一个下拉列表更新为另一个

发布时间:2020-12-16 01:36:05 所属栏目:百科 来源:网络整理
导读:似乎每次我学习一个新平台,我都必须重新解决同样的老问题: 使用Ajax更改另一个下拉列表时,在一个下拉列表中更新选项.这次 该框架是Wicket. 我有两个实体,我称之为Foo和Bar,每个Foo都有一个类别,这是Foo内部的枚举.此外,存在一个带有重载的find()方法的FooDA
似乎每次我学习一个新平台,我都必须重新解决同样的老问题:
使用Ajax更改另一个下拉列表时,在一个下拉列表中更新选项.这次
该框架是Wicket.

我有两个实体,我称之为Foo和Bar,每个Foo都有一个类别,这是Foo内部的枚举.此外,存在一个带有重载的find()方法的FooDAO:no-arg版本返回DB中的所有Foo,或者具有类型Foo的参数“filter”的版本,它返回非空值中的所有Foo匹配过滤器.

客户希望在创建新条形图时将Foos与条形图关联,但在添加条形图之前按类别过滤Foos.因此假设已经存在少数Foo,每个都有一个类别.用户进入创建栏页面和添加新Foo的部分:下拉列表A列出类别,并且在选择类别时,下拉列表B应该通过Ajax更新显示该类别中可用Foo的列表.请注意,没有选择类别,下拉列表B应显示所有可用的Foo.

我的HTML看起来有点像这样:

<form wicket:id="createBarForm">
<div>
    <label>Category</label>
    <select wicket:id="category">
    </select>
</div>
<div>
    <label>Available Foo(s)</label>
    <select class="xlarge" wicket:id="selectedFoo">
    </select>
</div>
<button style="float:right;">Add</button>

<!-- and more Bar related fields -->
</form>

(该按钮最终将获得自己的id和行为,但现在焦点在于列表.)

这是Java端(在页面的构造函数方法中):

createBarForm = new Form<Bar>("createBarForm",new CompoundPropertyModel<Bar>());

    final List<Foo> availableFoo = fooDao.find();

    final FormComponent<Foo> selectedFoo =
            new DropDownChoice<Foo>("selectedFoo",Model.of(new TechnologyFoo()),availableFoo);

    Foo.Category categoryStandin = null;

    final FormComponent<Foo.Category> fooCategory =
            new DropDownChoice<Foo.Category>
                ("fooCategory",Model.of(categoryStandin),Arrays.asList(Foo.Category.values()));

    fooCategory.add(new AjaxFormComponentUpdatingBehavior("onchange") {
        private static final long serialVersionUID = 1L;
        @Override
        protected void onUpdate(AjaxRequestTarget target) {
            // re-set the form component
            availableFoo.clear();
            ((DropDownChoice<Foo>)selectedFoo).setChoices(availableFoo);
            createBarForm.remove(selectedFoo);

            Foo.Category newSelection =
                    fooCategory.getModelObject();
            if (newSelection != null) {
                Foo filter = new Foo();
                filter.setCategory(newSelection);
                availableFoo.addAll(fooDao.find(filter));
            }
            else {
                availableFoo.addAll(fooDao.find());
            }
            // re-fresh the form component
            ((DropDownChoice<Foo>)selectedFoo).setChoices(availableFoo);
            createBarForm.add(selectedFoo);
        }
    });

    createBarForm.add(fooCategory);
    createBarForm.add(selectedFoo);

    // etc.....

我没有显示我的logger.debug调用,但是使用它们我能够显示正确捕获了newSelection,并且DAO正在返回预期的Foo列表.此外,avaliableFoo列表也包含所需的值.但是,Dropdown B始终显示Foo的完整列表,无论如何
类别选择.

您必须将您的DropDowns添加到AjaxRequestTarget,否则它们将不会更新.

如在

target.add(selectedFoo);

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读