Question

我正在开发一个jquery移动应用程序，我想从csv文件中获取数据并使用它来创建正确数量的缩略图li。我使用$ .csv.toArrays来引入csv数据。

即

csv数据

var data =
 {"color","URL","grade","setter","location"
  "color1","URL1","grade1","setter1","location1"}

我不确定如何定义一个能够获取此数据并生成正确数量的列表项的函数

Answer 1

首先在页面内容的html标记中加入listview：

<ul id="mylist" data-role="listview"></ul>

然后在代码中，假设您的csv数据实际上被解析为：

var data=[
  ["color","URL","grade","setter","location"],
  ["color1","URL1","grade1","setter1","location1"],
  ["color2","URL2","grade2","setter2","location2"]
];

您希望迭代跳过第一行的数据，这只是列标题（i = 1; i < data.length），并构建一个listitem html标记的字符串：

var listitems = '';
for (var i = 1; i < data.length; i++){
    listitems += '<li><a href="' + data[i][4] +'"><img src="' + data[i][1] +'"><h2>' + data[i][2] +'</h2><p>' + data[i][3] +'</p></a></li>';
}

最后，将这些项追加到listview并告诉jQM刷新：

 $("#mylist").empty().append(listitems).listview("refresh");

<强> DEMO

注意：您需要调整listitem标记以正确显示数据！

来自csv文件的jquery mobile li list view

1 个答案: