2

有什么简单的方法可以在 HTML 中创建一个列表视图并为其设置一个 onClick() 侦听器，就像在 Android 中可以完成的那样？我的要求是我想从服务器检索数据并将其显示在列表视图中给用户。数据将像 - 一样被检索10 rows at a time。

然后如果用户点击更多，next10 rows将被检索。然后，如果用户单击特定列表项，则在另一个页面中显示详细信息。

4

5 回答 5

1

这只是一个使用 Mootools 的快速解决方案，我认为您的输入是 JSON，其中包含列表数组中的项目：

new Request.JSON(
{
    url: '/list.json', 
    onSuccess: function(json)
    {
        json.list.each(function(key, val)
        {
            new Element('LI')
                .set('text', val)
                .addEvent('click', function()
                {
                    alert('item '+key+' pressed');

                    // alert('item '+val.id+' pressed');
                    // considering val is an object instead of raw string, this way you must change set to something like this set('text', val.text)

                })
                .inject($('list'));
                // any other thing you want add to your list item 
        });
    }
}).get();

<ul id="list"></ul>

键是数组中项目的位置，您可以使用我在评论中添加的 id 代替。

于 2012-12-18T17:57:01.067 回答
1

与其对表格进行分页，我更喜欢像在SlickGrid中那样使用虚拟滚动。

SlickGrid 有多种操作模式，但其核心功能是仅呈现您当前正在查看的行的 HTML。当您滚动时，行会根据需要动态创建和销毁。这允许您显示具有数百万行的网格。

API 允许您按需加载数据，因此只有在您滚动网格时才会从服务器获取行（以n为一组）。

于 2012-12-18T18:21:56.253 回答
1

HTML 中的列表如下所示。

<ul>
   <li><a href="details/url/id">Title</li>
   <li><a href="details/url/id">Title</li>
</ul>

网址可以转到详细信息页面。

要添加更多按钮，您将使用 javascript 和 ajax 从服务器获取更多行，并在获得响应时将更多项目附加到列表中。

于 2012-12-18T17:33:50.667 回答
0

我建议 Ember.js。Ember.js 有一个强大的绑定和模板系统，用于自动将 Javascript 对象与彼此和 DOM 同步。这对你正在做的事情来说是多余的，但如果你要对那个列表做任何复杂的事情，那是值得的。

Ember.CollectionView 的文档在这里：

http://emberjs.com/api/classes/Ember.CollectionView.html

于 2012-12-18T18:14:44.497 回答
0

您可以尝试 Jquery 数据表：

http://datatables.net/

于 2012-12-18T17:24:34.953 回答