jQueryMobile 列表显示

最新推荐文章于 2021-08-03 23:20:13 发布

minuswang

最新推荐文章于 2021-08-03 23:20:13 发布

阅读量560

点赞数

分类专栏： JqueryMobile

本文链接：https://blog.csdn.net/wonfly2011/article/details/38851281

版权

JqueryMobile 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

    <!DOCTYPE html>  
    <html>  
        <head>  
            <meta charset="utf-8">  
              
            <title></title>  
            <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />  
            <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>  
            <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>  
              
            <meta name="viewport" content="width=device-width, initial-scale=1">  
            <script >  
                /**  
                这里为listview的ul标签事先设置一个模板，然后与后台的数据key相对应  
                */  
                $(function(){  
                        //1、请求数据，这里就用本地数据了  
                        var data=[  
                                    {name:'mokai',age:'18',birthday:'1994-6-10',depat:'人事部'},  
                                    {name:'gongkai',age:'20',birthday:'1994-9-18',depat:'系统管理员'},  
                                    {name:'gongjingki',age:'23',birthday:'1984-1-10',depat:'人事部'},  
                                    {name:'caidi',age:'22',birthday:'1991-1-10',depat:'开发部'},  
                                    {name:'zhouzheng',age:'35',birthday:'1984-1-10',depat:'开发部'},  
                                 ];  
                      
                        var viewObj=$("#user_view");  
                          
                        /*2、循环遍历数据，并克隆模板，将数据插入到模板dbField相对应的节点中，然后增加到listview上*/  
                        for(var i=0; i<data.length; i++){  
                            var liTplObj=$("#li_tpl").clone();  
                            for(var key in data[i]){  
                                $("[dbField='"+key+"']",liTplObj).html(data[i][key]);  
                            }         
                            viewObj.append(liTplObj);  
                        }  
                          
                        //3、刷新 以上二种都可以刷新数据  
                        viewObj.listview("refresh");  
                        //viewObj.selectmenu("refresh",true);  
                      
                });  
            </script>  
        </head>  
        <body>  
            <div data-role='page' id="content_page">  
                <div data-role='header'>  
                    <h1>用户列表</h1>  
                </div>  
                <div data-role='content'>  
                    <div id="user_cont">  
                        <ul data-role='listview' id="user_view">  
                            <li id="li_tpl">  
                                <a>  
                                    <p><h1 dbField='name'>Mokai</h1><p>  
                                    <p>年龄：<span dbField='age'>18</span></p>  
                                    <p>出生日期：<span dbField='birthday'>1994-06-10</span></p>  
                                </a>  
                            </li>  
                        </ul>  
                    </div>  
                </div>  
            </div>  
        </body>  
    </html>