使用jQueryMobile从远程数据源绑定ListView
我是Jquery mobile的新手。我需要从db填充ListView。我正在查看此论坛链接： 我也想这样做，但我想从数据库中获取所有数据（图像和相应的数据）。我能够从远程数据源填充Listview。但这很简单，没有任何形象。下面是该代码。但我不确定如何在这里应用这种方法，并从远程数据源对listview和数据绑定进行更多自定义使用jQueryMobile从远程数据源绑定ListView,jquery,jquery-mobile,Jquery,Jquery Mobile,我是Jquery mobile的新手。我需要从db填充ListView。我正在查看此论坛链接： 我也想这样做，但我想从数据库中获取所有数据（图像和相应的数据）。我能够从远程数据源填充Listview。但这很简单，没有任何形象。下面是该代码。但我不确定如何在这里应用这种方法，并从远程数据源对listview和数据绑定进行更多自定义 <div data-role="content"> <ul data-role="listview" id="contentListView"
<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>
$（函数（）{
var serviceUrl=http://mydatasource:81/Service.asmx/show';
$.ajax({
url:serviceUrl，
成功：函数（xml）{
setTimeout（函数（）{
饲料项目=''；
$（xml）.find（“newset”）.each（函数（）{
var项目=$（此项），
title=item.find（'EmployeeID'）.text（），
link=item.find（'FirstName'）.text（）
feedItem=feedItem+”；
});
$（'contentListView'）。追加（feedItem）；
},100);
},
错误：函数（）{
},
数据类型：“xml”
});
});
非常感谢您的回复。非常感谢。。但当我尝试你的相同代码时，它会将我重定向到“发生网络错误！”警觉的。我错过了什么吗。顺便说一句，我在VisualStudio中试过这个。这是我的完整代码
<!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>
jQM复杂演示
李斯潘
{
字体大小：正常；
}
XML解析演示
$（'#index'）.live（'pagebeforeshow'，函数（e，数据）{
$（“#cars数据”）.empty（）；
$.ajax({
类型：“POST”，
url:“/echo/xml/”，
数据类型：“xml”，
数据：{
xml:“丰田章男日本”http://1call.ms/Websites/schwartz2012/images/toyota-rav4.jpgToyota 已宣布将召回778000个单元，这些单元可能是在后悬架上使用未正确拧紧的螺母制造的。”
},
成功：函数（xml）{
解析xml（xml）；
},
错误：函数（请求、错误）{
警报（'发生网络错误！'）；
}
});
});
$（“#汽车”）.live（'pagebeforeshow'，函数（）{
$（“#cars div[data role='header']h1”）.html（carObject.carName）；
$（“#汽车数据”）.empty（）；
$（“#汽车数据”）.append（“汽车类型：”+carObject.carName+” ）；
$（“#汽车数据”）.append（“汽车国家：”+carObject.carCountry+” ）；
$（“#汽车数据”）.append（“汽车描述：”+carObject.Description+” ）；
$（“#汽车数据”）.listview（“刷新”）；
$（'#car img'）.attr（'src'，carObject.img）
});
var ajax={
parseXML：函数（结果）{
$（结果）。查找（“汽车”）。每个（函数（）{
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数据”）。追加（“”）；
});
$（“#汽车数据”）.listview（“刷新”）；
}
}
var carObject={
卡纳姆：“，
国家：“，
img:“”，
说明：“”
}
谢谢看看我的例子，我是为别人做的，但它仍然可以用在你的案例中： 我的数据源是一个xml，不幸的是xml不能从远程域获取，所以JSFIDLE有一个模拟$。ajax xml抓取，但这个示例将向您展示如何做您想要的事情 要创建自定义listview，您需要此模板：
<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>
我的示例将向您展示如何填充此类listview（在我的示例中，是从xml填充的，但方法与json相同），并在新页面中显示这些数据。我做了一些更改，它对我有效。再次非常感谢。我正在这里粘贴代码。希望它能帮助使用远程数据源的人
<!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());
}
}