现在前端经常会用到卡片类的展示,比如多张银行卡的展示。这个时候需要用到一个统一的前端模板以保证样式的一致,我们只需要通过后台获取一个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,
Unity-Demo实例之 ✨ 实现UI-背包装备拖拽功能计算机网络---计算机网络基本概念(协议、体系)某东14薪变16薪,是诚意还是套路?让人意想不到的Python之樱花树(turtle库的华丽样式)java四大函数式接口(重点,简单)06【若依框架解读】数据范围过滤--太牛了Unity3D之UGUI基础--画布的三种模式os模块的简单使用html写樱花树,写樱花树的作文