KendoUi listview template的用法记录

 

在模版里要以#号开始和#号结束（备注：如果中间使用到了颜色，如：#000，就需要转义签，如： \#000）

第一段代码：

#
if (PROFILE_PHOTO) {
#<img src='#:PROFILE_PHOTO#' style='width:90px;' />#
}
else {
#<img src='@Html.UrlHref("LocalSite","/Images/defaultAvatar.png")' style='width:90px;' />#
}
#

 

上面这段代码表示：

如果PROFILE_PHOTO有值，不为null、undefined等，就显示这个数据（为base64Url格式）

如果上面的条件不满足，就显示默认的头像图片。

第二段代码：

<div>
#
if(NAME){
#<span>#:NAME#</span>#
}
else{
#<span>&nbsp;&nbsp;&nbsp;</span>#
}
#
</div>

 

上面这段代码表示：

如果NAME为空，就显示空字符串，否则就显示名称。避免显示出来 null   undefined等字样，影响美观。

第三段代码【模版完整代码】：

<script type="text/x-kendo-template" id="template">
    <div class="avatarChildControlMain">
        <table class="defaultForSelect" style="border:none 0px; width:100%;">
            <tr>
                <td style="width:90px; height:90px; padding-right:10px;">
                    <div class="defaultAvatarDiv" style="height:90px; width:90px;border-style:solid; border-width:1px; border-color:\#ccc; text-align:center; line-height:90px;">
                        #
                        if (PROFILE_PHOTO) {
                        #<img src='#:PROFILE_PHOTO#' style='width:90px;' />#
                        }
                        else {
                        #<img src='@Html.UrlHref("LocalSite","/Images/defaultAvatar.png")' style='width:90px;' />#
                        }
                        #
                    </div>
                    <div class="hoverAvatarDiv" style="height:90px; width:90px;border-style:solid; border-width:1px; border-color:\#ccc; text-align:center; line-height:90px;">
                        <div class="divPeopleEdit">
                            <a href="javaScript:" onclick="peopleEdit('#:ID#');"><i class="fa fa-pencil-square-o" aria-hidden="true">&nbsp;编辑</i></a>
                        </div>
                    </div>
                </td>
                <td style="vertical-align:middle;">
                    <div style="line-height:25px;">
                        <div>
                            #
                            if(NAME){
                            #<span>#:NAME#</span>#
                            }
                            else{
                            #<span>&nbsp;&nbsp;&nbsp;</span>#
                            }
                            #
                        </div>
                        <div>
                            #
                            if(PHONE_NUMBER){
                            #<span>#:PHONE_NUMBER#</span>#
                            }
                            else{
                            #<span>&nbsp;&nbsp;&nbsp;</span>#
                            }
                            #
                        </div>
                        <div>
                            #
                            if(ID_NUMBER){
                            #<span>#:ID_NUMBER#</span>#
                            }
                            else{
                            #<span>&nbsp;&nbsp;&nbsp;</span>#
                            }
                            #
                        </div>
                    </div>
                </td>
            </tr>
        </table>
    </div>
</script>