0

我正在尝试调整 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
               });
           }
       });
4

0 回答 0