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. Java并发编程核心方法与框架-Semaphore的使用

    Semaphore中文含义是信号.信号系统,这个类的主要作用就是限制线程并发数量.如果不限制线程并发数量,CPU资源很快就会被耗尽,每个线程执行的任务会相当缓慢,因为CPU要把时间片分配给不同的线程对 ...

  2. openfire

    wget http://download.igniterealtime.org/openfire/openfire-4.0.0-1.i386.rpm rpm -ivh openfire-4.0.0-1 ...

  3. 1.1 Activity

    1.概念 Application:由多个相关的松散的与用户进行交互Activity组成,通常被打包成apk后缀文件中: Activity:就是被用来进行与用户交互和用来与android内部特性交互的组 ...

  4. BZOJ 1006: [HNOI2008]神奇的国度( MCS )

    弦图最小染色...先用MCS求出完美消除序列然后再暴力染色... ------------------------------------------------------------------- ...

  5. [iOS开发]WKWebView加载JS

    最近项目要用webView加载js文件,挺同事说WKWebView比UIWebView更加好用,于是我今天就试试,百度一发,自己写了个demo. 先看我写的代码,然后再来看WKWebView跟UIWe ...

  6. 树莓派使用iperf3测量网络带宽

    这个工具需要两台设备都安装iperf3工具,一台作为服务端,一台作为客户端.客户端通过链接服务端测量吞吐量. 安装iperf3 sudo apt install iperf3 开启服务端 假设在一台I ...

  7. laravel 前后端分离 token

    由于自己开发的项目中用到了 JWT 技术,前端采用了 Vue.js 框架,后端采用了 CodeIgniter 框架,故作此文帮助使用相同技术栈的朋友们. 具体思路如下:把后端生成的 JWT token ...

  8. hibernate编写流程

    1.加载hibernatexml配置文件 2.创建sessionFactory 3.根据sessionFactory创建session 4.开启事务 5.持久化操作 6.提交事务 7.释放资源 其中第 ...

  9. 阅读 DPDK 中文论文两则

    基于DPDK的高效数据包捕获技术分析与应用 本文应用场景 网络安全领域的数据包捕获技术,对系统有高性能需求,要在短时间内成功收集.分析.处理大量数据,实时捕获效率低下. 旧有传统数据包处理机制 BPF ...

  10. Android Studio中多项目共享Library

    FAQ: as的projectA中有一个commonLib的源码库模块,projectB要调用其中的commonLib, 这个有没有方案?不用手动拷贝aar的   方案1. 采用gradle配置参数方 ...