最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

如何实现表格中只删除dom数据(代码)

来源:动视网 责编:小采 时间:2020-11-27 19:31:58
文档

如何实现表格中只删除dom数据(代码)

如何实现表格中只删除dom数据(代码):本篇文章给大家带来的内容是关于如何实现表格中只删除dom数据(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。本文记录仅对表格dom数据的删除操作;//在开始之前要避开一个误区,比如官方给的删除表格的行的时候仅仅是把行删除掉,
推荐度:
导读如何实现表格中只删除dom数据(代码):本篇文章给大家带来的内容是关于如何实现表格中只删除dom数据(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。本文记录仅对表格dom数据的删除操作;//在开始之前要避开一个误区,比如官方给的删除表格的行的时候仅仅是把行删除掉,


本篇文章给大家带来的内容是关于如何实现表格中只删除dom数据(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

本文记录仅对表格dom数据的删除操作;
//在开始之前要避开一个误区,比如官方给的删除表格的行的时候仅仅是把行删除掉,这样就会导致你的dom数据没有被改变,所以分页区显示的总条数就不会变,点击翻页会把之前的dom数据重载到表格中;所以重点就来了,删除数据要从重载表格入手!!!

var table;
var form;
layui.use('table', function() {
table = layui.table;
form = layui.form;
var a = 1;
table.render({
elem : '#deptUser',
id:'deptId',
height : 380,
width : 508
,page : true //开启分页
,limits: [10,20,50]
,cols : [ [ //表头
{type:'numbers', title : '序号',width : 44
},{field : 'CODE',title : '用户编号',width : 120
},{field : 'NAME',title : '用户名称'
},{fixed: 'right', title : '操作', width: 60, align:'center', toolbar: '#barDemo'
} ] ]
});
/* var $ = layui.$;
//表格顶部操作监听
$('.demoTable .layui-btn').on('click', function(){
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
}); */
table.on('tool(deptU)', function(obj){ //注:tool是工具条事件名
 //定义一个接收表格数据的变量 这个可以直接取得ajax返回的数据,也可以用 layui.table.cache.tableid 取得表格的数据
var userData = layui.table.cache.tableId;
var user = obj.data //获得当前行数据
,layEvent = obj.event; //获得 lay-event 对应的值
if(layEvent=="delete"){
//把删除后的新数据接收并返回给userData
var newData = new Array();
var ni = 0;
for(var i=0;i<userData.length;i++){
if(userData[i].ID != user.ID){
newData[ni] = userData[i];
ni++;
}
}
userData = newData;
//所获得的 tableIns 即为当前容器的实例 重点就是这里容易被忽视的,最简单却最不起眼。。
var tableIns = table.render({
 elem: '#deptUser'
 ,id:'deptId'
,height : 380
,width : 508
,page : true //开启分页
,limits: [10,20,50]
,data : newData
 ,cols : [ [ //表头
 {type:'numbers', title : '序号',width : 44
 },{field : 'CODE',title : '用户编号',width : 120
 },{field : 'NAME',title : '用户名称'
 },{fixed: 'right', title : '操作', width: 60, align:'center', toolbar: '#barDemo'
 } 
 ] ]
}); 
//上边定义的tableIns可以 使用reload方法,我这里重新渲染就可以了就没用到
}
});
});

文档

如何实现表格中只删除dom数据(代码)

如何实现表格中只删除dom数据(代码):本篇文章给大家带来的内容是关于如何实现表格中只删除dom数据(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。本文记录仅对表格dom数据的删除操作;//在开始之前要避开一个误区,比如官方给的删除表格的行的时候仅仅是把行删除掉,
推荐度:
标签: 删除 表格 数据
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top