我正在尝试调整 Kendo UI ListView 中的图像大小,该列表视图中填充了从 SQL 数据库查询的数据。
我的 ListView DIV 和模板:
<div>
<div id="lvUserMainPics"></div>
</div>
<script type="text/html" id="lv-pics-template">
<div id="profile-container">
<div id="profile">
<div id="profile-photo">
<div class="non-immediate-parent-container">
<img class="main-img" alt="" src="#=Pic#" />
</div>
</div>
</div>
</div>
</script>
这是我的数据源和 ListView 绑定:
var sourceMainPics = new kendo.data.DataSource({
transport: {
read: "api/userpics/pics/main"
},
schema: {
data: "Data",
total: "Count"
}
});
$("#lvUserMainPics").kendoListView({
dataSource: sourceMainPics,
template: kendo.template($("#lv-pics-template").html())
});
由于 ListView 正在绑定数据,我希望能够调用以下 JQuery 方法来调整图像的大小:
$('img.main-img').imgscale({
parent: '.non-immediate-parent-container',
fade: 1000
});
目前,我能够将图像绑定到 ListView,但调整大小不起作用。有人对我如何做到这一点有任何建议吗?如果情况更糟,我可以在上传过程中创建不同大小的图像并将它们保存到服务器,但我想先尝试这条路线。谢谢你的帮助。
[更新]
现在通过将 dataBound 事件添加到 ListView 来工作:
$("#lvUserMainPics").kendoListView({
dataSource: sourceMainPics,
template: kendo.template($("#lv-pics-template").html()),
dataBound: function (e) {
$('img.main-img').imgscale({
parent: '.non-immediate-parent-container',
fade: 1000
});
}
});