HTML/JavaScript 中的列表视图
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13938267/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
List view in HTML/JavaScript
提问by Ashwin
Is there any easy way to create a a listview in HTML and set an onClick() listener for it like it can be done in Android? My requirement is that I want to retrieve data from the server and display it in a listview to the user. The data will be retrieved like - 10 rows at a time.
有没有什么简单的方法可以在 HTML 中创建列表视图并为其设置一个 onClick() 侦听器，就像在 Android 中可以完成的那样？我的要求是我想从服务器检索数据并将其显示在列表视图中给用户。数据将像 - 一样检索10 rows at a time。
Then if the user clicks on more, next 10 rowswill be retrieved. Then if the user clicks on a particular list item, show the details in another page.
然后如果用户点击更多，下一个10 rows将被检索。然后，如果用户单击特定列表项，则在另一个页面中显示详细信息。
回答by dqhendricks
A list in HTML looks like this.
HTML 中的列表如下所示。
<ul>
<li><a href="details/url/id">Title</li>
<li><a href="details/url/id">Title</li>
</ul>
The urls can goto the details page.
网址可以转到详细信息页面。
To add a more button you would use javascript and ajax to get more rows from the server, and append more items to the list when you get the response.
要添加更多按钮，您将使用 javascript 和 ajax 从服务器获取更多行，并在收到响应时将更多项目附加到列表中。
回答by Ali
It's just a fast solution which uses Mootools, I consider your input is JSON which contain items in list array:
这只是一个使用 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>
Key is the position of item in array, you can use an id instead which I added in a comment.
键是项目在数组中的位置，您可以使用我在评论中添加的 id 代替。
回答by josh3736
Rather than paginating the table, I prefer to use virtual scrolling like in SlickGrid.
我更喜欢像在SlickGrid 中那样使用虚拟滚动，而不是对表格进行分页。
SlickGrid has many modes of operation, but its core functionality is to only render the HTML of the rows you're currently looking at. As you scroll, the rows are dynamically created and destroyed as necessary. This allows you to display a grid with millionsof rows.
SlickGrid 有多种操作模式，但其核心功能是仅呈现您当前正在查看的行的 HTML。当您滚动时，会根据需要动态创建和销毁行。这允许您显示具有数百万行的网格。
The API allows you to load data on-demand, so rows will be fetched from the server (in groups of n) only as you scroll the grid.
API 允许您按需加载数据，因此只有在您滚动网格时才会从服务器（以n为一组）获取行。
回答by user1158559
I suggest Ember.js. Ember.js has a powerful system of bindings and templates which are used to automagically synchronise Javascript objects with eachother and the DOM. It's overkill for what you're doing, but it's worth it if you're going to be doing anything complex with that list.
我建议 Ember.js。Ember.js 有一个强大的绑定和模板系统，用于自动同步 Javascript 对象与彼此和 DOM。这对你正在做的事情来说太过分了，但如果你打算用那个列表做任何复杂的事情，这是值得的。
The Docs for Ember.CollectionView are here:
Ember.CollectionView 的文档在这里：
