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="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动态添加不同类型的数据的更多相关文章
- MUI 里js动态添加数字输入框后,增加、减少按钮无效
numbox 的自动初化是在 mui.ready 时完成的mui 页面默认会自动初始化页面中的所有数字输入框,动态构造的 DOM 需要进行手动初始化.比如:您动态创建了一个 ID 为 abc 的数字输 ...
- 拓展jquery js动态添加html代码 初始化数据
1 /** * 新增数据筛选 */ (function () { $.filterEvent = function(options){ var _this = this; var defaults = ...
- js动态添加onload、onresize、onscroll事件(另类方法)
js动态添加onload.onresize.onscroll事件(另类方法) window 的 onload.onresize.onscroll 事件,跟其他的事件不一样,它不能用 attachE ...
- form表单 无法提交js动态添加的表单元素问题。。
第一种情况, 这种情况js动态添加的表单元素是不能提交到服务器端的 <table> <form method="post" action=" url ...
- 【原生js】js动态添加dom,如何绑定事件
首先要明白浏览器在加载页面的时候是按顺序来加载的,这样以来就很清楚了,js动态添加dom以后,这些dom并没有绑定事件,这个时候最简单的一个办法就是:将绑定事件的方法封装到一个函数A中,在动态添加完d ...
- 使用js动态添加组件
在文章开始之前,我想说两点 1 自己初学js,文章的内容在大神看来可能就是不值一提,但是谁都是从hello world来的,望高 手不吝指教# 2 我知道这个标题起的比较蛋疼,大家看图就能说明问题 ...
- 原生JS动态添加和删除类
原生JS动态添加和删除类 由于需要, 给按钮组监听点击事件(要求用事件委托),当有一个按钮被点击时,相应的给该按钮添加一个类(激活类),其他没有点击的按钮就要移出该类 添加和和删除类有三种方法 首先等 ...
- 原生js动态添加style,添加样式
原生js动态添加style,添加样式 第一种 var style="[assign-url='"+str+"']{display:initial}"; var ...
- Js动态添加复选框Checkbox
Js动态添加复选框Checkbox的实例方法!!! 首先,使用JS动态产生Checkbox可以采用如下类似的语句: var checkBox=document.createElement(" ...
随机推荐
- IBOutlet & IBAction
IBOutlet UILabel *label; 这个label在Interface Builder里被连接到一个UILabel.此时,这个label的retainCount为2. 所以,只要使用了I ...
- 配置ModSecurity防火墙与OWASP规则
中文译文参考:http://netsecurity.51cto.com/art/201407/446264.htm 英文原文参考:http://resources.infosecinstitute.c ...
- C#下的 Emgu CV
Emgu CV下载地址 http://sourceforge.net/projects/emgucv/files/ 找最新的下就行了,傻瓜式安装,选择目录后自动完成安装,然后提示安装VS2008和VS ...
- ASP.Net Core简介
定义:一个经过精简的.模块化的.NET Framework子集,目的是为了跨平台..NET Core的类库叫做“CoreFX”,更精简的版本叫做“CoreCLR”. ASP.NET Core 是微软的 ...
- java缓存算法【转】
http://my.oschina.net/u/866190/blog/188712 提到缓存,不得不提就是缓存算法(淘汰算法),常见算法有LRU.LFU和FIFO等算法,每种算法各有各的优势和缺点及 ...
- mysql监控管理工具--innotop
https://storage.googleapis.com/google-code-archive-downloads/v2/code.google.com/innotop/innotop-1.9. ...
- Java并发——线程池Executor框架
线程池 无限制的创建线程 若采用"为每个任务分配一个线程"的方式会存在一些缺陷,尤其是当需要创建大量线程时: 线程生命周期的开销非常高 资源消耗 稳定性 引入线程池 任务是一组逻辑 ...
- 介绍SmartUpload很好的网站
附带链接:http://www.cnblogs.com/elleniou/archive/2012/09/24/2700583.html
- Character Studio
- 并行计算vs分布式计算
一般认为,集中在同一个机柜内或同一个地点的紧密耦合多处理机系统或大规模并行处理系统是并行处理系统,而用局域网或广域网连接的计算机系统是分布式处理系统.松散耦合并行计算机中的并行操作系统有时也称为分布式 ...