mui h5 动态实现数据的移除和数据操作完后的重新获取
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代码
//添加企业联系人
(function($) {
$('#OA_task_1').on('tap', '.mui-btn-col', function(event) {
var elem = this;
var id = this.getAttribute('id');
var li = elem.parentNode.parentNode;
elem.class = 'mui-btn mui-btn-bule';
mui.confirm('确定添加该员工为企业联系人?', '提示', btnArray, function(e) {
if (e.index == 0) {
var ajaxUrl=getajaxUrl();
var url = ajaxUrl[0]['nativeIp']+"/mobile/labour/iscontacts";
mui.ajax(url,{
data:{
id:id,
type:"1"
},
dataType:'json',//服务器返回json格式数据
type:'post',//HTTP请求类型
timeout:10000,//超时时间设置为10秒;
success:function(data){
var result = eval(data);
result = eval(result);
if(result[0]['isok']){
$.swipeoutClose(li);
var divp="<p class='mui-pull-left pl-bule'>企业联系人</p>"
var contact = "<a id="+result[0].newlabour.id+" class='mui-btn mui-btn-bule'>企业联系人</a>"
li.innerHTML = '<div class="mui-slider-right mui-disabled" id="">'+contact+'<a id="'+result[0].newlabour.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].user.headimg+'"><div class="mui-media-body"><div class="mui-pull-left mui-ellipsis pl-name">'+result[0].user.nickname+'</div>'+divp+'</div><div class="mui-media-body"><p class="mui-pull-left">'+result[0].newlabour.updatetime+'</p></div></div>'
mui.toast('该员工已成为企业联系人!');
}
},
error:function(xhr,type,errorThrown){
//异常处理;
console.log(type);
}
});
}
else {
setTimeout(function() {
$.swipeoutClose(li);
}, 0);
}
});
});
var btnArray = ['确定', '取消'];
})(mui);
//移除企业联系人
(function($) {
$('#OA_task_1').on('tap', '.mui-btn-bule', function(event) {
var user = JSON.parse(plus.storage.getItem("user"))
var elem = this;
var id = this.getAttribute('id');
var li = elem.parentNode.parentNode;
mui.confirm('确定取消该员工为企业联系人?', '提示', btnArray, function(e) {
if (e.index == 0) {
var ajaxUrl=getajaxUrl();
var url = ajaxUrl[0]['nativeIp']+"/mobile/labour/iscontacts";
mui.ajax(url,{
data:{
id:id,
type:"0"
},
dataType:'json',//服务器返回json格式数据
type:'post',//HTTP请求类型
timeout:10000,//超时时间设置为10秒;
success:function(data){
var result = eval(data);
result = eval(result);
if(result[0]['isok']){
$.swipeoutClose(li);
var divp=""
var contact = "<a id="+result[0].newlabour.id+" class='mui-btn mui-btn-col'>企业联系人</a>"
li.innerHTML = '<div class="mui-slider-right mui-disabled" id="">'+contact+'<a id="'+result[0].newlabour.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].user.headimg+'"><div class="mui-media-body"><div class="mui-pull-left mui-ellipsis pl-name">'+result[0].user.nickname+'</div>'+divp+'</div><div class="mui-media-body"><p class="mui-pull-left">'+result[0].newlabour.updatetime+'</p></div></div>'
mui.toast('成功移除企业联系人!');
}
},
error:function(xhr,type,errorThrown){
//异常处理;
console.log(type);
}
});
}
else {
setTimeout(function() {
$.swipeoutClose(li);
}, 0);
}
});
});
var btnArray = ['确定', '取消'];
})(mui);
实现效果
mui h5 动态实现数据的移除和数据操作完后的重新获取的更多相关文章
- 动态加载、移除js、css
本文简单介绍动态加载.移除.替换js/css文件 .有时候我们在写前端的时候,会有出现需要动态加载一些东如css js 这样能减轻用户加载负担,从而提高响应效率.下面贴出代码.//JS写法 <s ...
- sql的存储过程实例--动态根据表数据复制一个表的数据到另一个表
动态根据表数据复制一个表的数据到另一个表 把track表的记录 根据mac_id后两位数字,复制到对应track_? 的表中 如:mac_id=12345678910,则后两位10 对应表为track ...
- Echarts使用及动态加载图表数据 折线图X轴数据动态加载
Echarts简介 echarts,缩写来自Enterprise Charts,商业级数据图表,一个纯JavaScript的图表库,来自百度...我想应该够简洁了 使用Echarts 目前,就官网的文 ...
- VBS 移除excel数据公式,只保留值
如果将excel数据公式移除,只保留计算之后的值,将大大减少excel文件. 因为有上篇移除excel外部数据链接的经验,进行excel数据公式移除将快的多,方法如下. 首先我们得明白怎么手动移除ex ...
- 使用size()方法输出列表中的元素数量。需要注意的是,这个方法返回的值可能不是真实的,尤其当有线程在添加数据或者移除数据时,这个方法需要遍历整个列表来计算元素数量,而遍历过的数据可能已经改变。仅当没有任何线程修改列表时,才能保证返回的结果是准确的。
使用size()方法输出列表中的元素数量.需要注意的是,这个方法返回的值可能不是真实的,尤其当有线程在添加数据或者移除数据时,这个方法需要遍历整个列表来计算元素数量,而遍历过的数据可能已经改变.仅当没 ...
- C#动态生成Word文档并填充数据
C#也能动态生成Word文档并填充数据 http://www.cnblogs.com/qyfan82/archive/2007/09/14/893293.html 引用http://blog.csdn ...
- [Asp.net]常见数据导入Excel,Excel数据导入数据库解决方案,总有一款适合你!
引言 项目中常用到将数据导入Excel,将Excel中的数据导入数据库的功能,曾经也查找过相关的内容,将曾经用过的方案总结一下. 方案一 NPOI NPOI 是 POI 项目的 .NET 版本.POI ...
- 通过js获取前台数据向一般处理程序传递Json数据,并解析Json数据,将前台传来的Json数据写入数据库表中
摘自:http://blog.csdn.net/mazhaojuan/article/details/8592015 通过js获取前台数据向一般处理程序传递Json数据,并解析Json数据,将前台传来 ...
- 第二篇:Power BI数据可视化之基于Web数据的报表制作(经典级示例)
前言 报表制作流程的第一步显然是从各个数据源导入数据,Power BI能从很多种数据源导入数据:如Excel,CSV,XML,以及各类数据库(SQL Server,Oracle,My SQL等),两大 ...
随机推荐
- Cocos2d-x MultipleTouch & CCControllButton's confusion
在cocos2dx的程序设计中有时候会遇到需要多点触摸的功能,下面先介绍一下在cocos2dx中多点触摸的一般规则,然后介绍我遇到的一个有关多点触摸的情景的解决方案. (一)使用多点触摸规则: 关于多 ...
- Eclipse导入Maven项目时class not found
用maven开发javaweb项目可以自动导包,可以在配置文件pom.xml中发现依赖包,今天在eclipse中导入maven项目,开启tomcat服务器时报错 class not found, 看到 ...
- python的memcache使用如果对key设置了一个int型
如果对key设置了int型,会出现不可预知的错误,这个问题纠结了我好久,最终还是加了个str(),切忌切忌
- [Android]使用platform密钥来给apk文件签名的命令
1.使用platform密钥对apk进行签名 1.1.进入<Android_Source_Path>/build/target/product/security,找到[platform.p ...
- careercup-数学与概率
7.3 给定直角坐标系上的两条线,确定这两条线会不会相交. 解法: 此题有很多不确定的地方:两条线的格式是什么?两条线实为同一条怎么处理?这些含糊不清的地方最好跟面试官讨论一下. 下面将做出以下假设: ...
- 打造强大的BaseModel(2):让Model实现自动映射,将字典转化成Model
打造强大的BaseModel(1):让Model自我描述 这篇文章将讲述Model一项更高级也最常用的功能,让Model实现自动映射–将字典转化成Model(所有代码全由Swift实现) 将JSON转 ...
- Hibernate的fetch (转)
fetch ,可以设置fetch = "select" 和 fetch = "join" 用一对多来举例: fetch = "select" ...
- ArcGIS Server JavaScript API 各命名空间的含义【转】
1.esri 命名空间 所有的对象都是在 esri 命名空间下的,esri 有自己的属性和方法. 如 esri.version 返回当前 JavaScript API 的版本号.e ...
- Es6 之for of
能工摹形,巧匠窃意. -- 毕加索 2016-10-10 <!DOCTYPE HTML> <html> <head> <script src="tr ...
- 使用RPC 调用NameNode中的方法
用户在Client 端是很难对 NameNode中的信息进行直接访问的, 所以 ,在Hadoop系统中为 Client端 提供了一系列的方法调用,这些方法调用是通过RPC 方法来实现的, 根据RPC ...