Now the front end often uses the card class display , For example, display of multiple bank cards . At this time, a unified front-end template is needed to ensure the consistency of the style , We just need to get one from the background List, Then insert the data into the template , Then the template append To a list div in .

        What we use here is Jquery.

        introduce js The main documents are as follows
<script type="text/javascript" src="jquery.validate.js"></script>
     
Based on UI chart , Draw a static card , After adjusting the style , Start using placeholders for places where dynamic data changes are needed , Make a template and hide it . After getting data from the background, transfer the template to the <div> In progress append, The code is as follows .

<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"> text 1</h5> <h5 class="">{0}</h5> </div> <div
class="head_body_text">   <h5 class="head_body_text_left"> text 2</h5>   <h5
class="">{1}</h5>   </div> </div> </div> </textarea>
ajax After getting the data from the background , Fill template , towards div in append  Template html  Of js The code is as follows :
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. variable 1, ret. variable 2); } $("#card_list").html(appendHtml); } },

If you need to fill in the template , At this time, you need to determine which template to fill in after which one , At this time, we need to make append Of <div> In id stay js Generated in code , To determine which one div. Upper code
<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"> text 1</h5> <h5
class="channel_body_merchantNo">{0}</h5> </div> <div class="channel_body_text">
<h5 class="c_body_text_left"> text 2</h5> <h5 class="c_body_amount">{1}</h5> </div>
</div> <div id='{0}'></div>// Need to match template dynamically here , there id You must select a unique value in the list . </div>
</textarea>
 

 

 

 

Technology
©2019-2020 Toolsou All rights reserved,
It's unexpected Python Cherry tree (turtle The gorgeous style of Library )Unity3D of UGUI Basics -- Three modes of canvas os Simple use of module computer network --- Basic concepts of computer network ( agreement , system )html Writing about cherry trees , Writing about cherry trees Some East 14 Pay change 16 salary , Sincerity or routine ?Unity-Demo Examples ✨ realization UI- Backpack equipment drag function 06【 Interpretation according to the frame 】 Data range filtering -- awesome java Four functional interfaces ( a key , simple )