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

时间: 2024-09-30 21:21:23

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

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

numbox 的自动初化是在 mui.ready 时完成的mui 页面默认会自动初始化页面中的所有数字输入框,动态构造的 DOM 需要进行手动初始化.比如:您动态创建了一个 ID 为 abc 的数字输入框,需要 mui('#abc').numbox() 初始化一下. 为什么 test() 放在 mui.plusReady 外边可以,而放在里边就不可以?这是因为 numbox 的自动初化是在 mui.ready 时完成的,直接在外部的 test() 执行发生在 mui.ready 之前,而写在 m

每天都有新发现——如何优雅的用js动态添加html代码

body { font-family: 微软雅黑,"Microsoft YaHei", Georgia,Helvetica,Arial,sans-serif,宋体, PMingLiU,serif; font-size: 10.5pt; line-height: 1.5; } html, body { } h1 { font-size:1.5em; font-weight:bold; } h2 { font-size:1.4em; font-weight:bold; } h3 { fon

js动态添加file控件

<html></head><script language="javascript" type="text/ecmascript">//======================//功能:在表单中input file控件//参数:parentID---要插入input file控件的父元素ID// inputID----input file控件的ID//======================function createI

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

首先要明白浏览器在加载页面的时候是按顺序来加载的,这样以来就很清楚了,js动态添加dom以后,这些dom并没有绑定事件,这个时候最简单的一个办法就是:将绑定事件的方法封装到一个函数A中,在动态添加完dom以后立即执行一次函数A即可. 需要注意的是,在你可能同事需要添加许多的dom,不要添加一个就执行一次函数A,这样会增加浏览器的负载,你需要在所有dom添加完以后在执行函数A,例如你用一个for循环遍历dom组合并拼接成一个字符串,然后添加到某个父级dom里面,这个时候你需要在循环外添加一次就可以

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

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

JS动态添加到下拉列表数据

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>JS动态添加删除表格数据</title></head><body><script type="text/javascript"> function f() { var provinceName=docume

datatable动态添加,及填充数据

DataTable tblDatas = new DataTable("Datas"); tblDatas.Columns.Add("ID", Type.GetType("System.Int32")); tblDatas.Columns[0].AutoIncrement = true; tblDatas.Columns[0].AutoIncrementSeed = 1; tblDatas.Columns[0].AutoIncrementStep

使用反射为泛型集合添加其他类型的数据时遇到的问题

泛型是提供给javac编译器使用的,可以限定集合中的输入类型,让编译器挡住源程序中的非法输入,编译器编译带类型说明的集合进会去掉“类型”信息,使程序运行效率不受影响. 由于编译生成的字节码会去掉泛型的类型信息,只要能跳过编译器,就可以往某个泛型集合虽加入其它类型的数据. 所以我们可以用反射为泛型集合添加其他类型的数据. 例1: ArrayList<Integer> arrayList = new ArrayList<Integer>(); arrayList .add(10); a

Js动态添加复选框Checkbox的实例方法!!!

首先,使用JS动态产生Checkbox可以采用如下类似的语句: var checkBox=document.createElement("input"); checkBox.setAttribute("type","checkbox"); checkBox.setAttribute("id",'123456'); 但是,这样产生的checkbox是不带尾后的文字的,如果需要添加,那么需要使用 document.createTe