如何在jQuery中绑定数据列表 [英] How to bind datalist in jquery
本文介绍了如何在jQuery中绑定数据列表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想将我的数据列表绑定到jquery中.这是我的客户端代码:
I want to bind my datalist in jquery. Here is my client side code:
<head>
<script src="jss/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$.ajax({
type: "POST",
url: "WebForm1.aspx/GetProducts",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
failure: function (response) {
alert(response.d);
},
error: function (response) {
alert(response.d);
}
});
});
function OnSuccess(response) {
$("[id*=dlOnFrontPageProducts]").attr("border", "1");
var xmlDoc = $.parseXML(response.d);
var xml = $(xmlDoc);
var customers = xml.find("Table1");
var row = $("[id*=dlOnFrontPageProducts] tr:last-child").clone(true);
$("[id*=dlOnFrontPageProducts] tr:last-child").remove();
$.each(customers, function () {
alert(this);
var customer = $(this);
$(".Name", row).html(customer.find("Name").text());
$(".BrandName", row).html(customer.find("BrandName").text());
$(".MarketPrice", row).html(customer.find("MarketPrice").text());
$(".CurrencyShortName", row).html(customer.find("CurrencyShortName").text());
$(".Price", row).html(customer.find("Price").text());
$(".WindowImageUrl", row).html(customer.find("WindowImageUrl").text());
$(".SaleCount", row).html(customer.find("SaleCount").text());
$(".IsActive", row).html(customer.find("IsActive").text());
$("[id*=dlOnFrontPageProducts]").append(row);
row = $("[id*=dlOnFrontPageProducts] tr:last-child").clone(true);
});
}
</script>
</head>
<body>
<asp:DataList runat="server" ID="dlOnFrontPageProducts" RepeatColumns="4" RepeatDirection="Horizontal"
RepeatLayout="Table" EnableTheming="True" OnItemDataBound="dlChanceProducts_ItemDataBound">
<ItemTemplate>
<div class="box-product fixed">
<div class="prod_hold">
<a class="wrap_link" href="ProductDetail.aspx?prid=<%# Eval("ProductId") %>"><span
class="images">
<asp:Image runat="server" ID="imgWindow" /></span> </a>
<div class="pricetag_small">
<span class="old_price">
<%# Eval("MarketPrice")%><%# Eval("CurrencyShortName")%></span> <span class="new_price">
<%# Eval("Price", "{0:n}")%>
<%# Eval("CurrencyShortName")%></span>
</div>
<div class="info">
<h3>
<%# Eval("Name") %></h3>
<p>
<%# Eval("BrandName")%></p>
<a class="add_to_cart_small" href="/core/ajaxresult.aspx?act=prod&prid=<%#Eval("ProductId")%>">
Sepete Ekle</a> <a class="wishlist_small" href="#">Listeme Ekle</a> <a class="compare_small"
href="#">Karşılaştır</a>
</div>
</div>
</div>
<div class="clear">
</div>
</ItemTemplate>
</asp:DataList>
</body>
我返回的数据正确，但数据列表未绑定.你有什么建议吗?
My returned data is correct but datalist doesn't bind. Do you have any suggestion?
推荐答案
这是我的代码，请检查您的代码并进行适当的更改并获得答案
here is my code pls check with your code and make appropriate changes and get answer
<asp:DataList ID="dlCustomers" runat="server" RepeatLayout="Table" RepeatColumns="3"
CellPadding="3" CellSpacing="3" HeaderStyle-VerticalAlign="Top">
<ItemStyle HorizontalAlign="Center" />
<ItemTemplate>
<table cellpadding="3" cellspacing="3" border="1" style="width: 310px; height: 100px; border: thin 2px #428bca; color: black; background-color: #EEEEEE">
<tr>
<td style="text-align: center; background-color: cyan; color: black">
<b><span class="plot"><%# Eval("PlotNumber") %> </span></b>
</td>
</tr>
<tr>
<td>Seasoncode:<span class="Season"><%# Eval("Seasoncode") %> </span>
<br />
Village: <span class="Village"><%# Eval("Village") %></span><br />
Planting Date: <span class="PlantingDate"><%# Eval("PlantingDate")%></span><br />
Plant: <span class="Planttype"><%# Eval("Planttype")%></span>
Crop: <span class="CropType"><%# Eval("CropType")%></span>
Nursery: <span class="NurseryType"><%# Eval("NurseryType")%></span><br />
Cutas Setts: <span class="CutasSetts"><%# Eval("CutasSetts")%></span><br />
Seed Supply: <span class="SeedSupply"><%# Eval("SeedSupply")%></span><br />
Cutas Bulk: <span class="CutasBulk"><%# Eval("CutasBulk")%></span><br />
Cane Supply: <span class="CaneSupply"><%# Eval("CaneSupply")%></span><br />
</td>
</tr>
</table>
</ItemTemplate>
</asp:DataList>
jQuery代码:-
function plot_details(paramstr) {
$("[id*=dlCustomers]").hide();
$.ajax({
type: "POST",
url: "CommonView.aspx/GetCustomers",
data: "{'paramstr': '" + paramstr + "', 'procname': '" + 'DBSP_Get_PartyPlotView' + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
failure: function (response) {
alert(response.d);
},
error: function (response) {
alert(response.d);
}
});
}
function OnSuccess(response) {
var xmlDoc = $.parseXML(response.d);
var xml = $(xmlDoc);
var customers = xml.find("Table");
var repeatColumns = parseInt("<%=dlCustomers.RepeatColumns == 0 ? 1 : dlCustomers.RepeatColumns %>");
var rowCount = Math.ceil(customers.length / repeatColumns);
var i = 0;
while (i < repeatColumns * rowCount) {
var row = $("[id*=dlCustomers] tr").eq(0).clone(true);
for (var j = 0; j < repeatColumns; j++) {
var customer = $(customers[i]);
if (customer.length == 0) {
$("table:last", row).remove();
} else {
$(".plot", row).eq(j).html(customer.find("PlotNumber").text());
$(".Season", row).eq(j).html(customer.find("Seasoncode").text());
$(".Village", row).eq(j).html(customer.find("Village").text());
$(".PlantingDate", row).eq(j).html(customer.find("PlantingDate").text());
$(".Planttype", row).eq(j).html(customer.find("Planttype").text());
$(".CropType", row).eq(j).html(customer.find("CropType").text());
$(".NurseryType", row).eq(j).html(customer.find("NurseryType").text());
$(".Variety", row).eq(j).html(customer.find("Variety").text());
$(".CutasSetts", row).eq(j).html(customer.find("CutasSetts").text());
$(".CutasBulk", row).eq(j).html(customer.find("CutasBulk").text());
$(".SeedSupply", row).eq(j).html(customer.find("SeedSupply").text());
$(".CaneSupply", row).eq(j).html(customer.find("CaneSupply").text());
}
i++;
}
$("[id*=dlCustomers]").append(row);
}
$("[id*=dlCustomers] tr").eq(0).remove();
$("[id*=dlCustomers]").show();
}
这篇关于如何在jQuery中绑定数据列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
