现在前端经常会用到卡片类的展示,比如多张银行卡的展示。这个时候需要用到一个统一的前端模板以保证样式的一致,我们只需要通过后台获取一个List,然后向模板中塞数据即可,然后将模板append到一个列表展示的div中。

       这里采用的是Jquery.

        引入js文件主要如下
<script type="text/javascript" src="jquery.validate.js"></script>
     
先根据UI图,画一个静态的卡片,调好样式过后,开始使用占位符对需要动态数据改变的地方进行占位,做成模板并隐藏。从后台获取数据后将模板向<div>中进行append,代码如下。

<div id="card_list"></div>
<textarea id="m_template" style="display: none;"> <div class="m_box"> <div
class="m_head"> <div class="head_body_text"> <h5
class="head_body_text_left">文本1</h5> <h5 class="">{0}</h5> </div> <div
class="head_body_text">   <h5 class="head_body_text_left">文本2</h5>   <h5
class="">{1}</h5>   </div> </div> </div> </textarea>
ajax从后台拿数据后,填充模板,向div中append 模板html 的js代码如下:
url:"-----", type:"get", success:function(data){ if(data && data.retCode ==
'0'){ var list = data.returnVal; var appendHtml = ''; for(var i = 0; i <
list.length; i++){ var ret = userList[i]; var html_template =
$("#m_template").text(); appendHtml += $.validator.format(html_template,
ret.变量1, ret.变量2); } $("#card_list").html(appendHtml); } },

如果需要向模板中还要在填充模板的话,这个时候需要唯一确定是在哪一个模板后填充哪一个模板,这个时候需要使append的<div>中的id在js代码中生成,以确定是哪一个div。上代码
<textarea id="m_template" style="display: none;"> <div class="c_box"> <div
class="c_head"> <div class="c_body_text"> <h5
class="channel_body_text_left">文本1</h5> <h5
class="channel_body_merchantNo">{0}</h5> </div> <div class="channel_body_text">
<h5 class="c_body_text_left">文本2</h5> <h5 class="c_body_amount">{1}</h5> </div>
</div> <div id='{0}'></div>//需要在这里在动态拼模板,这里的id必须选择一个列表中唯一确定的值。 </div>
</textarea>
 

 

 

 

技术
©2019-2020 Toolsou All rights reserved,
ToastUtils 的使用element-ui的el-date-picker组件获取值python 中的短路逻辑mybatis系列之返回结果映射Golang数组平分,数组拆分,数组分组java几种常见运行时异常及简单例子分页工具类PageResult[RK3399][Android7.1] 学习笔记 DRM驱动程序开发(介绍)人工智能算法总结PowerShell中使用WebClient 下载文件并获取下载进度