您的位置：首页 > 其它

后台返回list，拼在页面ul li中

2016-01-14 17:06 274 查看
ssnc项目由一个管理平台和3个APP端，开始做管理平台时候，页面都是他们准备好的，现在做APP时，每个页面风格都不太一致，万变不离其宗，我负责大多都是一些查询，如何将查询数据显示在页面中。看着原型里面链接到的页面中数据都是写死的，比如：

<body>
<div class="dh mar4">
 <ul class="news" id="shengchanfqul">

   <li> <a href="zydaohang3.html" class="zs">
      <dl>
        <dt class="left"><img src="${path}/resource/app/b/images/qc.jpg"></dt>
        <dd>
          <h2>蔬菜东1区</h2>
          <p>规划种植芹菜，辣椒等作物</p>
        </dd>
      </dl>
      </a>
    </li>
<li> <a href="zydaohang3.html" class="zs">
      <dl>
        <dt class="left"><img src="${path}/resource/app/b/images/xhs.jpg"></dt>
        <dd>
          <h2>蔬菜东2区</h2>
          <p>规划种植西红柿等作物</p>
        </dd>
      </dl>
      </a>
     </li>
</ul>
</div>
<pre name="code" class="java"></body>




       其实li里面是查询出来数据，所以这个时候就需要遍历返回的list集合，在页面添加js，然后根据原型中页面代码结构，自己拼出来（将之前的li都去掉）：

<script type="text/javascript">
$(function(){
	//加载js函数
	lodeData();
});
function lodeData(){
	//action根据gnfquuid返回的生产分区json，shengchanfq为返回的list，定义的变量
	$.get("shengchanfq.json?gnfquuid=${gnfquuid}", function(shengchanfq){
		for(var i=0; i<shengchanfq.length; i++){
			var d = shengchanfq[i];
			var html = '';
			//遍历shengchanfq，拼接html
		 	html +='<li> '; 
			html +='<a href="${path}/app/shengchandy.do?scfquuid='+d.scfquuid+'" class="zs">';//链接到生产分区页面，并传递功能分区uuid参数
			html +='  <dl>'; 
			/* html +='   <dt class="left"><img src="${filepath }/${resdirs.scfq_img}/${d.scfqimg}"></dt>';//图片的物理路径 */
			html +='   <dt class="left"><img src="${path}/resource/app/b/images/pg.jpg"></dt>';//图片的物理路径
			html +='     <dd>';
			html +='      <h2>'+d.scfqname+'</h2>';
			html +='      <p>'+d.scfqdesc+'</p>';
			html +='     </dd>';
			html +='    </dl>'; 
		    html +=' </a>';
			html +='</li>'; 
			$('#shengchanfqul').append(html);//shengchanfqul即ul的id值
		}	
	});	
}
</script>
       lodeData()功能就是action返回的list遍历赋值给li，然后页面中的ul再append上我们拼的li，便可是实现返回的list加载到页面的li列表中。
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航