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. 【三支火把】---C语言const用法总结

    C语言关键字const相信对于不少C语言新手是既陌生又熟悉的,好像经常见,但是却不知道为何用,怎么用?学习至此,总结一下const的用法,使用程序来帮助你理解该关键字,希望能帮到像我一样的新手. 我看 ...

  2. 自助用户选择VM Network

    在VMM中为用户所属角色分配“作者VM网络”权限后,用户才可以在部署虚机的选择不同的VM Network,否则用户只能使用模板上所使用的VM Network,无法进行选择

  3. 在CentOS6上安装Redis

    检查安装依赖程序 yum install -y gcc-c++ tcl wget 获取安装文件 wget http://download.redis.io/releases/redis-2.8.17. ...

  4. SPOJ 3273 - Order statistic set , Treap

    点击打开链接 题意: 集合S支持一下四种操作:   INSERT(S,x) :   假设S中没有x,则插入x DELETE(S,x):  假设S中有x,则删除x K-TH(S):           ...

  5. Xutils 源码解析【转】

    原文:http://my.oschina.net/u/1538627/blog/395098 目录[-] 1. 功能介绍 2. 详细设计 2.1 View模块 2.1.1 总体设计 2.1.2 流程图 ...

  6. 编译openjdk源码

    http://www.cnblogs.com/ACFLOOD/p/5528035.html

  7. 【转】cocos2d-x 开发中使用的一些工具

    http://k57box.blog.163.com/blog/static/142261374201327112050361/ 这些工具平常也用到,不过没有像这样整理出来,这是我在网上看到的.就记录 ...

  8. iOS中利用 runtime 一键改变字体

    1.准备 我们新建一个项目名叫ChangeFont,然后我就随便找了个名叫loveway.ttf的字体库拖进去,里面的工程目录大概就是这样的 目录 现在我们就简单的直接在storyboard上拖了一个 ...

  9. Android 自定义View修炼-Android 实现自定义的卫星式菜单(弧形菜单)View

    一.总述 Android 实现卫星式菜单也叫弧形菜单的主要要做的工作如下:1.动画的处理2.自定义ViewGroup来实现卫星式菜单View (1)自定义属性       a. 在attrs.xml中 ...

  10. Unity3D 之防止刚体碰撞导致旋转

    有时候两个刚体发生碰撞的时候,其中一个质量小的会有发生旋转的情况 如果遇到这样的情况,只需要给刚体添加一个约束就行了. 添加这个就行了.