我是Jquery手机的新手。我需要从db填充ListView。我正在查看此论坛链接：
http://www.isgoodstuff.com/2012/06/10/html5-custom-listviews-with-jquerymobile/
我想做同样的事情，但我想从数据库中获取所有数据（图像和相应的数据）。我能够从远程数据源填充Listview。但这很简单，没有任何形象。以下是该代码。但我不知道如何在这里应用这种方法，并从远程数据源获得更多自定义外观列表视图和数据绑定。
<div data-role="content">
<ul data-role="listview" id="contentListView" data-inset="true" data-filter="true"></ul>
</div>
<script type="text/javascript" charset="utf-8">
$(function(){
var serviceUrl='http://mydatasource:81/Service.asmx/show';
$.ajax({
url:serviceUrl,
success:function(xml){
setTimeout(function(){
feedItem = '';
$(xml).find( "newset" ).each(function(){
var item = $(this),
title = item.find('EmployeeID').text(),
link = item.find('FirstName').text()
feedItem = feedItem + '<li class="test"><a class="test2" href="#">';
feedItem = feedItem + link;
feedItem = feedItem + '</a></li>';
});
$('#contentListView').append(feedItem);
},100);
},
error:function(){
},
dataType:"xml"
});
});
</script>
感谢。 Bavya。
非常感谢您的回复..非常感谢..但是当我尝试使用相同的代码时，它会将我重定向到'网络错误！'警报。我错过了什么。顺便说一下，我在视觉工作室试过这个。这是我的完整代码。
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<style type="text/css">
li span
{
font-weight: normal;
}
</style>
</head>
<body>
<div data-role="page" id="index">
<div data-role="header">
<h1>
XML Parsing demo</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true" id="cars-data">
</ul>
</div>
</div>
<div data-role="page" id="cars">
<div data-role="header">
<a data-role="button" data-transition="none" data-theme="a" href="#index">Back</a>
<h1>
</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true" id="car-data">
</ul>
<img src="" width="100%" style="height: auto;" id="car-img">
</div>
</div>
<script type="text/javascript" charset="utf-8">
$('#index').live('pagebeforeshow', function (e, data) {
$('#cars-data').empty();
$.ajax({
type: "POST",
url: "/echo/xml/",
dataType: "xml",
data: {
xml: "<cars><car><name>TOYOTA</name><country>JAPAN</country><pic>http://1call.ms/Websites/schwartz2012/images/toyota-rav4.jpg</pic><description>Toyota has announced that it will recall a total of 778,000 units that may have been manufactured with improperly-tightened nuts on the rear suspension.</description></car></cars>"
},
success: function (xml) {
ajax.parseXML(xml);
},
error: function (request, error) {
alert('Network error has occurred!');
}
});
});
$("#cars").live('pagebeforeshow', function () {
$("#cars div[data-role='header'] h1").html(carObject.carName);
$('#car-data').empty();
$('#car-data').append('<li>Car Type:<span> ' + carObject.carName + '</span></li>');
$('#car-data').append('<li>Car Country:<span> ' + carObject.carCountry + '</span></li>');
$('#car-data').append('<li>Car Description:<span> ' + carObject.description + '</span></li>');
$('#car-data').listview('refresh');
$('#car-img').attr('src', carObject.img)
});
var ajax = {
parseXML: function (result) {
$(result).find("car").each(function () {
carObject.carName = $(this).find('name').text();
carObject.carCountry = $(this).find('country').text();
carObject.img = $(this).find('pic').text();
carObject.description = $(this).find('description').text();
$('#cars-data').append('<li><a href="#cars"><img src="' + carObject.img + '" title="sample" height="100%" width="100%"/><h3>Car type:<span> ' + carObject.carName + '</span></h3><p>' + carObject.description + '</p></a></li>');
});
$('#cars-data').listview('refresh');
}
}
var carObject = {
carName: '',
carCountry: '',
img: '',
description: ''
}
</script>
</body>
</html>
由于
答案 0 :(得分：1)
看看我的例子，我是为别人做的，但它仍可用于你的案例：http://jsfiddle.net/Gajotres/AzXdT/
我的数据源是一个xml，遗憾的是xml无法从远程域获取，所以jsFiddle有一个模型$ .ajax xml抓取，这个例子仍然会告诉你如何做你想做的事。
要创建自定义列表视图，您需要以下模板：
<ul data-role="listview">
<li><a href="index.html">
<img src="images/sample.jpg" title="sample"/>
<h3>Sample image</h3>
<p>Sample</p>
</a></li>
<li><a href="index.html">
<img src="images/sample.jpg" title="sample"/>
<h3>Sample image</h3>
<p>Sample 2</p>
</a></li>
</ul>
我的示例将向您展示如何填充此类列表视图（在我的情况下来自xml，但方法与json相同）并在新页面中显示此数据。
答案 1 :(得分：1)
我做了一些改动，它对我有用。再次感谢。我在这里粘贴我的代码。希望它能帮助使用远程数据源的人。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
li span
{
font-weight: normal;
}
</style>
<title> Sample App using jQuery Mobile</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<head>
<body>
<div data-role="page" id="car">
<div data-role="header" data-postion="fixed">
<h1> Cars</h1>
<h1 id="blogheader">Loading...</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true" id="contentListView">
</ul>
</div>
<div data-role="footer" data-position="fixed">
<h1> Footer </h1>
</div>
</div>
<script type="text/javascript" charset="utf-8">
$(function(){
var serviceUrl='http://mysite:81/Service.asmx/ShowListViewData';
$.ajax({
url:serviceUrl,
success:function(xml){
setTimeout(
function(){
$(xml).find( "newset" ).each(function(){
carName = $(this).find('ItemName').text();
img = $(this).find('ImageUrl').text();
description = $(this).find('ItemDescription').text();
$('#contentListView').append('<li><a href="#"><img src="' + img + '" title="sample" height="100%" width="100%"/><h3>Car type:<span> '+carName+'</span></h3><p>' + description + '</p></a></li>');
});
$('#contentListView').listview('refresh');
}
,100);
},
error:function(){
},
dataType:"xml"
});
});
</script>
</body>
</html>
这是我的网络服务： -
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Script.Services;
using System.Web.Services;
using System.Data;
using System.Data.SqlClient;
using System.Web.Script.Serialization;
using System.IO;
using System.Web.Configuration;
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
[System.Web.Script.Services.ScriptService]
public class Service : System.Web.Services.WebService
{
[WebMethod()]
public void ShowListViewData()
{
string connection = WebConfigurationManager.ConnectionStrings["SampleConnectionString"].ConnectionString;
SqlConnection conn = new SqlConnection(connection);
SqlCommand SqlCommand = new SqlCommand();
string s = "SELECT ImageUrl,ItemName,ItemDescription FROM ListViewSource";
SqlCommand.CommandText = s;
SqlCommand.Connection = conn;
SqlDataAdapter da = new SqlDataAdapter(SqlCommand);
DataSet ds = new DataSet();
da.Fill(ds, "newset");
StringWriter sw = new StringWriter();
ds.WriteXml(sw, XmlWriteMode.IgnoreSchema);
Context.Response.Clear();
Context.Response.ContentType = "application/xml";
Context.Response.Flush();
Context.Response.Write(sw.ToString());
}
}
感谢。