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,
experiment 11-1-6 Output string at specified position (20 branch ) inherit jpa Repository Write custom method query iPhone 12 price , Configure full exposure : Cut it off 64GB, Battery 2227mAh start Share has surpassed Ningde Era !LG Chemical confirmation to spin off battery business unit SSM Project's excel File upload and add to database use VS2019 “Windows Desktop applications ” Module creation Win32 window mysql No backup recovery Vue Transfer parameters and receiving of page Jump ( Essence )2020 year 8 month 9 day C# Basic knowledge reflex vue monitor Treeselect Change of options