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="data: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="data: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("没网了~~~~~~或者服务器断了~~");
}
});

mui H5 js动态添加不同类型的数据的更多相关文章

  1. MUI 里js动态添加数字输入框后,增加、减少按钮无效

    numbox 的自动初化是在 mui.ready 时完成的mui 页面默认会自动初始化页面中的所有数字输入框,动态构造的 DOM 需要进行手动初始化.比如:您动态创建了一个 ID 为 abc 的数字输 ...

  2. 拓展jquery js动态添加html代码 初始化数据

    1 /** * 新增数据筛选 */ (function () { $.filterEvent = function(options){ var _this = this; var defaults = ...

  3. js动态添加onload、onresize、onscroll事件(另类方法)

    js动态添加onload.onresize.onscroll事件(另类方法)   window 的 onload.onresize.onscroll 事件,跟其他的事件不一样,它不能用 attachE ...

  4. form表单 无法提交js动态添加的表单元素问题。。

    第一种情况, 这种情况js动态添加的表单元素是不能提交到服务器端的 <table> <form method="post" action=" url   ...

  5. 【原生js】js动态添加dom,如何绑定事件

    首先要明白浏览器在加载页面的时候是按顺序来加载的,这样以来就很清楚了,js动态添加dom以后,这些dom并没有绑定事件,这个时候最简单的一个办法就是:将绑定事件的方法封装到一个函数A中,在动态添加完d ...

  6. 使用js动态添加组件

    在文章开始之前,我想说两点 1 自己初学js,文章的内容在大神看来可能就是不值一提,但是谁都是从hello world来的,望高   手不吝指教# 2 我知道这个标题起的比较蛋疼,大家看图就能说明问题 ...

  7. 原生JS动态添加和删除类

    原生JS动态添加和删除类 由于需要, 给按钮组监听点击事件(要求用事件委托),当有一个按钮被点击时,相应的给该按钮添加一个类(激活类),其他没有点击的按钮就要移出该类 添加和和删除类有三种方法 首先等 ...

  8. 原生js动态添加style,添加样式

    原生js动态添加style,添加样式 第一种 var style="[assign-url='"+str+"']{display:initial}"; var ...

  9. Js动态添加复选框Checkbox

    Js动态添加复选框Checkbox的实例方法!!! 首先,使用JS动态产生Checkbox可以采用如下类似的语句: var checkBox=document.createElement(" ...

随机推荐

  1. DoctorNote医生处方笔记开发记录

    1.开发背景 一个开诊所的中医朋友,希望我能给他开发一个记录病人姓名和处方的Android手机app,以便查询病人每次就诊信息,比如上一次的处方,以前他要找个病人上一次的就诊处方,几乎要翻遍一叠厚厚的 ...

  2. Redis_基本类型介绍和指令___2

    1.hash Redis hash 是一个string类型的field和value的映射表,hash特别适合用于存储对象. Redis 中每个 hash 可以存储 232 - 1 键值对(40多亿). ...

  3. ios7自带的晃动效果

    ios7自带的晃动效果 by 伍雪颖 - (void)registerEffectForView:(UIView *)aView depth:(CGFloat)depth; { UIInterpola ...

  4. struts2 struts.xml配置文件详解

    <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN&quo ...

  5. java15 IO装饰设计模式

    IO装饰设计模式:(IO中使用了装饰设计模式) 节点流可以直接从源读取数据,处理流就是对节点流的包装,这就是装饰,装饰就是对原有的流的性能的提升.比如买的车,马力不够,就进行装饰,使其马力增大. 装饰 ...

  6. Linux 内核进程管理之进程ID 。图解

    http://www.cnblogs.com/hazir/tag/kernel/ Linux 内核进程管理之进程ID   Linux 内核使用 task_struct 数据结构来关联所有与进程有关的数 ...

  7. Ubuntu上架设PPPoE Server

    一.安裝 PPPoE Server Software1)sudo apt-get install ppp2)rp-pppoe(非apt套件)wget -c http://www.roaringpeng ...

  8. Android(java)学习笔记139:在TextView组件中利用Html插入文字或图片

    首先我们看看代码: 1.activity_main.xml: <LinearLayout xmlns:android="http://schemas.android.com/apk/r ...

  9. 【转载】NIO服务端序列图

    步骤一:打开ServerSocketChannel,用于监听客户端的连接,它是所有客户端连接的父管道,代码示例如下: ServerSocketChannel acceptorSvr = ServerS ...

  10. C# 自定义排序

    /// <summary> /// 实体 /// </summary> public class Product { public int ID { get; set; } p ...