jquery mobile listview加载json数据,刷新view

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        
        <title></title>
       <link rel="stylesheet" href="/jquery.mobile-1.3.2.min.css" />
      <script src="/jquery-1.9.1.min.js"></script>
      <script src="/jquery.mobile-1.3.2.min.js"></script>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <script >
           $(function(){  
                    var data=[  
                                {productName:'电脑键盘',price:'200',deposit:'50',repertory:'898',sale:'100'},  
                                {productName:'电脑键盘',price:'200',deposit:'50',repertory:'898',sale:'100'},  
                                {productName:'电脑键盘',price:'200',deposit:'50',repertory:'898',sale:'100'},  
                                {productName:'电脑键盘',price:'200',deposit:'50',repertory:'898',sale:'100'},  
                                {productName:'电脑键盘',price:'200',deposit:'50',repertory:'898',sale:'100'},  
                                {productName:'电脑键盘',price:'200',deposit:'50',repertory:'898',sale:'100'},  
                                {productName:'电脑键盘',price:'200',deposit:'50',repertory:'898',sale:'100'},  
                                {productName:'电脑键盘',price:'200',deposit:'50',repertory:'898',sale:'100'},  
                                
                             ];  
                  
                    var viewObj=$("#allProductUl");  
                      
                    for(var i=0; i<data.length; i++){  
                        var liTplObj=$("#allProductLi").clone();  
                        for(var key in data[i]){  
                            $("[dbField='"+key+"']",liTplObj).html(data[i][key]);  
                        }         
                        viewObj.append(liTplObj);  
                    }  
                      
                    viewObj.listview("refresh");  
                    //viewObj.selectmenu("refresh",true);  
                  
            }); 
        </script>
    </head>
    <body>
       <div data-role="page" id="allProduct"  data-fullscreen="false">
 <div data-role="header"  data-theme="b"  data-position="fixed" >
    <div data-role="navbar" >
        <ul>
            <li><a href=""  data-ajax="false" class="ui-btn-active" data-transition="none">商品列表1</a></li>

            <li><a href="" data-ajax="false" data-transition="none">商品列表2</a></li>

           <li><a href="" data-ajax="false" data-transition="none">商品列表2</a></li>

        </ul>
    </div>
    </div>   
<ul id="allProductUl" data-role="listview"  data-inset="true" style="margin-top:0px;">
    <li  id="allProductLi">
        <a href="/productDetail.vm"  data-transition="slide"  data-ajax="false">
            <img src="" style="margin-top:10px;" />
            <h4 class="productName"  style="margin-top:0px;" dbField='productName'>电脑</h4>
            <p class="productPrice" style="margin-top:10px;">
                <span>¥</span><span dbField='price' style="color:#f00;">160</span>
                <span style="margin-left:10px;">¥</span><span dbField='deposit'>100</span>
            </p>
            <p  style="margin-top:10px;margin-bottom:5px;">
            <span  style="font-size:12px;">库存:</span><span dbField='repertory' style="font-size:12px;">60</span><span style="font-size:12px;">件</span><span        style="margin-left:10px;font-size:12px;" >已卖:</span><span style="color:#f00;font-size:12px;" dbField='sale'>20</span><span style="color:#000;font-size:12px;">件</span>
            </p>
        </a>
    </li>
</ul>  
</div>
 </body>
</html>

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值