Question

我试图只有一个简单的html页面，它将少量数据加载到表格中。这使用我现在的代码工作正常。现在，我希望它能够排序，例如，名称链接标签（这是标题进入的基本标题）。但我无法弄清楚如何做到这一点。我只是在SQL中进行排序功能，一旦我得到一个开始工作，我应该能够找出大量的SQL语句和所有其他功能来完美工作，只需要开始。这是我的代码：

public class SimpleView extends SimpleViewPage {

IModel model;

public SimpleView() {
    model = new LoadableDetachableModel() {

        @Override
        protected Object load() {
            PersonService pM = new PersonService();
            return pM.getAllPersons(new OrderByOption());
        }
    };

    add(new ListView("persons", model) {

        @Override
        protected void populateItem(ListItem item) {
            Person person = (Person) item.getModelObject();
            item.add(new Label("name", person.getName()));
            item.add(new Label("birthdate", person.getBirthdate()));
            item.add(new Label("phone", person.getPhone()));
        }
    });

    add(new Label("size", "Number of people: " + getPersons().size()));
    add(new Link("namelink") {

        @Override
        public void onClick() {
            ;
        }
    });
    add(new Link("datelink") {
        @Override
        public void onClick() {
        }
    });
    add(new Link("phonelink") {

        @Override
        public void onClick() {
        }
    });
}
}

希望有人可以帮助我！而且我对编程一般都是新手，所以如果可能的话，一个例子会非常有用，包括理论:)谢谢！

Answer 1

好的，我将向您展示如何通过ajax实现此目的（不是重新加载整个页面，而只是ListView）。

要通过ajax更新ListView，您必须将其放在WebMarkupContainer上（这是检票口要求）。此外，您必须使用AjaxLink而不仅仅是“链接”。

public class SimpleView extends SimpleViewPage
{

    //container which contains ListView.
    private WebMarkupContainer container;

    //I don't know your OrderByOption implementation, but I'd rather make it enumeration(it could be everywhere you want):
    public static enum OrderByOption

    {
        NO_ORDER, NAME, DATE, PHONE;
    }

    //so you must store any field that represents current store, to update your model properly.
    private OrderByOption currentOrder = OrderByOption.NO_ORDER;

    public SimpleView ()
    {

        //generics added for convenience
        Imodel<List<Person>> model = new LoadableDetachableModel<List<Person>> ()
        {

            @Override
            protected Object load ()
            {
                PersonService pM = new PersonService ();
                //as I understand sorting logic at SQL-side, so, you must return lists with order according to currentOrder parameter 
                return pM.getAllPersons ( currentOrder );
            }
        };

        container = new WebMarkupContainer ( "listViewContainer" );
        //to update any component via ajax, you must set its outputmarkupid flag to true
        container.setOutputMarkupId ( true );

        container.add ( new ListView<Person> ( "persons", model )
        {
            @Override
            protected void populateItem ( ListItem<Person> item )
            {
                Person person = item.getModelObject ();
                item.add ( new Label ( "name", person.getName () ) );
                item.add ( new Label ( "birthdate", person.getBirthdate () ) );
                item.add ( new Label ( "phone", person.getPhone () ) );
            }
        } );

        add ( new Label ( "size", "Number of people: " + getPersons ().size () ) );

        add ( new AjaxLink ( "nameLink" )
        {
            @Override
            public void onClick ( AjaxRequestTarget target )
            {
                currentOrder = OrderByOption.NAME;
                target.add ( container );
            }
        } );
        add ( new AjaxLink ( "datelink" )
        {
            @Override
            public void onClick ( AjaxRequestTarget target )
            {
                currentOrder = OrderByOption.DATE;
                target.add ( container );
            }
        } );
        add ( new AjaxLink ( "phonelink" )
        {
            @Override
            public void onClick ( AjaxRequestTarget target )
            {
                currentOrder = OrderByOption.PHONE;
                target.add ( container );
            }
        } );
        add ( container );
    }
}

您还需要更新html文件以包装ListView：

...
    <div wicket:id="listViewContainer">
        <div wicket:id="persons">
            ...
        </div>
    </div>
...

如果您正确排序，那么ListView将会正确更新。如果你不熟悉枚举（比如我实现的OrderByOption），那么你可以使用你想要的任何类型，例如：testlpe - int（1 - 用于名称排序，2用于dat，等等）。您必须考虑到，您必须以某种方式说出您的模型现在要进行的排序（当面板更新时），这是实现此目的的一种方法 - 存储像currentOrder这样的全局字段。

希望这有帮助。

如何使用LoadableDetachableModel更新我的html页面？

1 个答案: