• mui H5 js动态添加不同类型的数据


    html页面需要添加的页面的数据格式  

    <ul class="mui-table-view" id="OA_task_1">
    <li class="mui-table-view-cell">
    <div class="mui-slider-right mui-disabled">
    <a class="mui-btn mui-btn-bule">企业联系人</a>
    <a class="mui-btn mui-btn-red">移除</a>
    </div>
    <div class="mui-slider-handle"><img class="mui-media-object mui-pull-left radius" src="images/img42.png">
    <div class="mui-media-body">
    <div class="mui-pull-left mui-ellipsis pl-name">萌萌哒天团萌萌哒天团萌萌哒天团萌萌哒天团</div>
    <p class="mui-pull-left pl-bule">企业联系人</p>
    </div>
    <div class="mui-media-body">
    <p class="mui-pull-left">2016年1月5日</p>
    </div>
    </div>
    </li>
    <li class="mui-table-view-cell">
    <div class="mui-slider-right mui-disabled">
    <a class="mui-btn mui-btn-col">企业联系人</a>
    <a class="mui-btn mui-btn-red">移除</a>
    </div>
    <div class="mui-slider-handle"><img class="mui-media-object mui-pull-left radius" src="images/imgPPT.png">
    <div class="mui-media-body">
    <div class="mui-pull-left mui-ellipsis pl-name">T-ARA</div>
    </div>
    <div class="mui-media-body">
    <p class="mui-pull-left">2016年1月5日</p>
    </div>
    </div>
    </li>
    </ul>

    js代码

    mui.ajax(url,{
    data:{
    userid:userid,
    type:'1'
    },
    dataType:'json',//服务器返回json格式数据
    type:'post',//HTTP请求类型
    timeout:10000,//超时时间设置为10秒;
    success:function(data){
    //服务器返回响应,根据响应结果,分析是否登录成功;
    var result = eval(data);
    result = eval(result);
    if(result!=null){
    var x = 0;
    var value = result[0].value;
    var hcount = result[0].count;
    var appsize = result[0].appsize;
    mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > value)); //参数为true代表没有更多数据了。
    var table = document.body.querySelector('.mui-table-view');
    var cells = document.body.querySelectorAll('.mui-table-view-cell');
    if(hcount > cells.length){
    for (var i = cells.length, len = i + appsize; i < len; i++) {
    var li = document.createElement('li');
    li.className = 'mui-table-view-cell';
    /*var contacts = result[0].page[i].contacts*/
    /*console.log(result[0].page[0].contacts)*/
    var contacts=result[0].page[i].contacts
    var contact;
    var divp;
    if(contacts==1)
    contact = "<a id="+result[0].page[i].id+" class='mui-btn mui-btn-bule'>企业联系人</a>"
    if(contacts==0)
    contact = "<a id="+result[0].page[i].id+" class='mui-btn mui-btn-col'>企业联系人</a>"
    if(contacts==1)
    divp="<p class='mui-pull-left pl-bule'>企业联系人</p>"
    if(contacts==0)
    divp=""
    li.innerHTML = '<div class="mui-slider-right mui-disabled" id="">'+contact+'<a id="'+result[0].page[i].id+'" class="mui-btn mui-btn-red">移除</a></div><div class="mui-slider-handle"><img class="mui-media-object mui-pull-left radius" src="/'+result[0].page[i].headimg+'"><div class="mui-media-body"><div class="mui-pull-left mui-ellipsis pl-name">'+result[0].page[i].nickname+'</div>'+divp+'</div><div class="mui-media-body"><p class="mui-pull-left">'+result[0].page[i].updatetime+'</p></div></div>'
    table.appendChild(li);
    }
    }

    }

    },
    error:function(xhr,type,errorThrown){
    //异常处理;
    console.log("没网了~~~~~~或者服务器断了~~");
    }
    });

  • 相关阅读:
    PHP 如何阻止用户上传成人照片或者裸照
    centos 从php5.1升级php到5.3的方法
    用jQuery实现鼠标移动切换图片动画
    利用表格实现大图轮播
    css导行下拉动画
    java script 基本函数
    java script 数组去重两种方法
    java script两个列表之间移动数据
    JavaScript做个时间表 Date()
    JS For 循环详解;棋盘放粮食 64;冒泡排序实例
  • 原文地址:https://www.cnblogs.com/lemon863376328/p/5120691.html
Copyright © 2020-2023  润新知