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. 视频播放(iOS开发)

    视频播放 一.视频播放介绍(5种实现方案) AVPlayer 优点 可以自定义UI,进行控制 缺点 单纯的播放,没有控制UI,而且如果要显示播放界面,需要借助AVPlayerLayer,添加图层到需要 ...

  2. C#- WinForm获取 当前执行程序路径的几种方法

    1.获取和设置当前目录的完全限定路径.string str = System.Environment.CurrentDirectory;Result: C:xxxxxx 2.获取启动了应用程序的可执行 ...

  3. IOS GCD 使用(一) 简介

    一 GCD简介 GCD(Grand Central Dispatch)是苹果为实现并发编程提供的新技术.从基本功能上讲,GCD有点像NSOperationQueue,他们都允许程序将任务切分为多个单一 ...

  4. 【05】了解C++默默编写并调用那些函数

    1.如果没有声明copy构造方法,copy赋值操作符,和析构方法,编译器会自动生成这些方法,且是inline. 2.如果没有声明任何构造方法,编译器会自动生成一个default构造方法,且是inlin ...

  5. SQL中使用WITH AS提高性能(二)

    继上一节 对比两条查询,第一是用了with as 第二条语句没用with as 查看执行计划的效果 WITH vep AS ( SELECT package.OrderCode , RANK() OV ...

  6. [React] React Fundamentals: Accessing Child Properties

    When you're building your React components, you'll probably want to access child properties of the m ...

  7. 写个 Hello World 而已,要不要这么震撼?!

    Atom 编辑器的一个插件,可以让你写代码的时候体验狂拽酷炫的效果! 如果来点音乐.再配上机械键盘的话,写代码是不是爽到爆呢? 这货全名叫: activate-power-mode atom pack ...

  8. android学习笔记之ImageView的scaleType属性

    我们知道,ImageView有一个属性叫做scaleType,它的取值一共有八种,分别是:matrix,fitXY,fitStart,fitCenter,fitEnd,center,centerCro ...

  9. 微信小程序的一些限制

    小程序的一些限制: 不支持HTML.没有 Dom.网页用的 JS.CSS 基本要全部重写,WXML 的语法和 HTML 差异还挺大,基本是一个个照着手册的属性去改.CSS 选择器不支持级联. 小程序源 ...

  10. PHP中的超级全局变量

    PHP内置了一些超级全局变量,我们可以在脚本的任何地方使用和可见,下面记录一下这些全局变量的作用: 1.$_SERVER $_SERVER超级全局变量包含由web服务器创建的信息,它提供了服务器和客户 ...