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 动态实现数据的移除和数据操作完后的重新获取的更多相关文章

  1. 动态加载、移除js、css

    本文简单介绍动态加载.移除.替换js/css文件 .有时候我们在写前端的时候,会有出现需要动态加载一些东如css js 这样能减轻用户加载负担,从而提高响应效率.下面贴出代码.//JS写法 <s ...

  2. sql的存储过程实例--动态根据表数据复制一个表的数据到另一个表

    动态根据表数据复制一个表的数据到另一个表 把track表的记录 根据mac_id后两位数字,复制到对应track_? 的表中 如:mac_id=12345678910,则后两位10 对应表为track ...

  3. Echarts使用及动态加载图表数据 折线图X轴数据动态加载

    Echarts简介 echarts,缩写来自Enterprise Charts,商业级数据图表,一个纯JavaScript的图表库,来自百度...我想应该够简洁了 使用Echarts 目前,就官网的文 ...

  4. VBS 移除excel数据公式,只保留值

    如果将excel数据公式移除,只保留计算之后的值,将大大减少excel文件. 因为有上篇移除excel外部数据链接的经验,进行excel数据公式移除将快的多,方法如下. 首先我们得明白怎么手动移除ex ...

  5. 使用size()方法输出列表中的元素数量。需要注意的是,这个方法返回的值可能不是真实的,尤其当有线程在添加数据或者移除数据时,这个方法需要遍历整个列表来计算元素数量,而遍历过的数据可能已经改变。仅当没有任何线程修改列表时,才能保证返回的结果是准确的。

    使用size()方法输出列表中的元素数量.需要注意的是,这个方法返回的值可能不是真实的,尤其当有线程在添加数据或者移除数据时,这个方法需要遍历整个列表来计算元素数量,而遍历过的数据可能已经改变.仅当没 ...

  6. C#动态生成Word文档并填充数据

    C#也能动态生成Word文档并填充数据 http://www.cnblogs.com/qyfan82/archive/2007/09/14/893293.html 引用http://blog.csdn ...

  7. [Asp.net]常见数据导入Excel,Excel数据导入数据库解决方案,总有一款适合你!

    引言 项目中常用到将数据导入Excel,将Excel中的数据导入数据库的功能,曾经也查找过相关的内容,将曾经用过的方案总结一下. 方案一 NPOI NPOI 是 POI 项目的 .NET 版本.POI ...

  8. 通过js获取前台数据向一般处理程序传递Json数据,并解析Json数据,将前台传来的Json数据写入数据库表中

    摘自:http://blog.csdn.net/mazhaojuan/article/details/8592015 通过js获取前台数据向一般处理程序传递Json数据,并解析Json数据,将前台传来 ...

  9. 第二篇:Power BI数据可视化之基于Web数据的报表制作(经典级示例)

    前言 报表制作流程的第一步显然是从各个数据源导入数据,Power BI能从很多种数据源导入数据:如Excel,CSV,XML,以及各类数据库(SQL Server,Oracle,My SQL等),两大 ...

随机推荐

  1. Cocos2d-x MultipleTouch & CCControllButton's confusion

    在cocos2dx的程序设计中有时候会遇到需要多点触摸的功能,下面先介绍一下在cocos2dx中多点触摸的一般规则,然后介绍我遇到的一个有关多点触摸的情景的解决方案. (一)使用多点触摸规则: 关于多 ...

  2. Eclipse导入Maven项目时class not found

    用maven开发javaweb项目可以自动导包,可以在配置文件pom.xml中发现依赖包,今天在eclipse中导入maven项目,开启tomcat服务器时报错 class not found, 看到 ...

  3. python的memcache使用如果对key设置了一个int型

    如果对key设置了int型,会出现不可预知的错误,这个问题纠结了我好久,最终还是加了个str(),切忌切忌

  4. [Android]使用platform密钥来给apk文件签名的命令

    1.使用platform密钥对apk进行签名 1.1.进入<Android_Source_Path>/build/target/product/security,找到[platform.p ...

  5. careercup-数学与概率

    7.3 给定直角坐标系上的两条线,确定这两条线会不会相交. 解法: 此题有很多不确定的地方:两条线的格式是什么?两条线实为同一条怎么处理?这些含糊不清的地方最好跟面试官讨论一下. 下面将做出以下假设: ...

  6. 打造强大的BaseModel(2):让Model实现自动映射,将字典转化成Model

    打造强大的BaseModel(1):让Model自我描述 这篇文章将讲述Model一项更高级也最常用的功能,让Model实现自动映射–将字典转化成Model(所有代码全由Swift实现) 将JSON转 ...

  7. Hibernate的fetch (转)

    fetch ,可以设置fetch = "select" 和 fetch = "join" 用一对多来举例: fetch = "select" ...

  8. ArcGIS Server JavaScript API 各命名空间的含义【转】

    1.esri 命名空间      所有的对象都是在 esri 命名空间下的,esri 有自己的属性和方法.      如 esri.version 返回当前 JavaScript API 的版本号.e ...

  9. Es6 之for of

    能工摹形,巧匠窃意. -- 毕加索 2016-10-10 <!DOCTYPE HTML> <html> <head> <script src="tr ...

  10. 使用RPC 调用NameNode中的方法

    用户在Client 端是很难对 NameNode中的信息进行直接访问的, 所以 ,在Hadoop系统中为 Client端 提供了一系列的方法调用,这些方法调用是通过RPC 方法来实现的, 根据RPC ...