Layui表格之动态添加数据(表格多选解决方案)
前言:
Layui已经给出了多选记录的解决方案,是在每条数据的前面加上CheckBox,每次选择都有监听。效果是这样:
实现监听的代码如下,这是一种解决选择多条数据的方案:
table.on('edit(test)', function(obj){ //注:edit是固定事件名,test是table原始容器的属性 lay-filter="对应的值"
console.log(obj.value); //得到修改后的值
console.log(obj.field); //当前编辑的字段名
console.log(obj.data); //所在行的所有相关数据
});
本文记录的是我使用的另一种解决方案,即展示两个表格。详细需求如下:
需求:
1、页面展示两个表格,左边表格展示所有数据,右边是一个空表格展示已经选中的数据。
2、当点击左边数据表格某条记录,右边表格动态添加这条记录。
3、表单提交的时候直接提交右边表格所有数据。
这样就实现了记录多选,相对比较直观。
实现效果:
实现步骤分析:
1、既然提交的是右边表格的数据,是动态添加的,说明是不断变化的数据集合,所以应该设为变量。
2、当点击左边的表格数据,应该获取当前这条数据和右边表格的所有数据,将当前行数据添加到右边的集合变量中。
3、进行表格重载,刷新右边的表格。
代码参考:
// 设置变量存储已选择列表的数据
var tableBak = [];
// 监听表格点击事件
table.on('row(LAY_table_equipment)', function(obj) {
var data = obj.data;
// 设新变量存储右边列表的所有数据(源数据+选择的一条数据)
var dataBak = [];
// 源数据
tableBak = table.cache.LAY_table_equipment_choose;
// 去重
for (var i = 0; i < tableBak.length; i++) {
if (tableBak[i].id == data.id) {
layer.msg("请勿重复添加!", {icon : 0,time : 1500});
} else {
dataBak.push(tableBak[i]);
}
}
dataBak.push(data);
tableBak = dataBak;
// 表格重载
table.reload("LAY_table_equipment_choose", {
data : dataBak,
})
// 表格选中样式
obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
});
注意:
tableBak = table.cache.LAY_table_equipment_choose;
table.cache.表格ID获取的是表格当页的所有数据,如果分页的话需要注意。
Layui表格之动态添加数据(表格多选解决方案)的更多相关文章
- SPA项目开发之动态树+数据表格+分页
SPA项目开发之动态树+数据表格+分页 动态生成NavMenu导航菜单(只支持2级菜单) <el-menu key="" index=""> < ...
- ASP.NET网页动态添加数据行
一看到这标题<ASP.NET网页动态添加数据行>,想起来似乎有点难实现.因为网页的周期性原因,往往在PostBack之后,状态难于有所保留.但Insus.NET又想实现这样的效果,用户点击 ...
- 关于devexpress报表XtraReport,动态修改报表样式(.repx格式),动态添加数据并使用的理解
一.基本概念: XtraReports 中的每个报表都由 XtraRepot 类的一个实例表示,或者由该类的子类来表示(这种情况更常见). 因此,每个报表都作为带区的容器使用,而每个带区中都包含报表控 ...
- js表单动态添加数据并提交
情景1:已经存在form对象了,动态为form增加对象并提交 function formAppendSubmit(){ var myform=$('#newArticleForm'); //得到for ...
- 【javascript 动态添加数据到 HTML 页面】
今天简单的学习了一下有关对象字面量的定义和 javascript 如何取出对象字面量的值的知识,javascript 动态添加数据到 HTML 页面的问题. [学习目标]有如下的一组数据通过 Ajax ...
- 第27讲 UI组件之 ScrollView与底部动态添加数据
第27讲 UI组件之 ScrollView与底部动态添加数据 1. ScrollView(滚动视图) ScrollView(滚动视图)是实现滚动的一个控件,只需要将需要滚动的控件添加到ScrollVi ...
- Android之ListView动态添加数据(SQLiteOpenHelper类添加数据)
一.SQLiteOpenHelper类: 这次我们通过sqlite来动态添加数据,接下来我们创建一个openHelper.java,在前面sqlite博客中我们已经详细的讲了SQLite的创建及使用等 ...
- Jquery+Ajax实现Select动态添加数据
https://blog.csdn.net/zhengxiangwen/article/details/46480687 最近在工作中,遇到了一个关于select的问题.一般情况下,select下拉框 ...
- MiniUI动态添加table表格
本文将介绍一下,如何用Jquery MiniUi动态添加一行table表格 1.效果展示 ↓ 2.具体代码 <script type="text/javascript"> ...
随机推荐
- MVC5 + EF6 简单示例(转载)
原文地址:http://www.cnblogs.com/panchunting/p/creating-an-entity-framework-data-model-for-an-asp-net-mvc ...
- 【BZOJ3625】【CF438E】小朋友和二叉树
题目 传送门 思路&做法 我们可以用\(v_i\)表示\(i\)在\(c\)中出现了几次, 用\(f_i\)表示权值为\(i\)的神犇树的总数, 于是 \[ f_x = \sum_{i = 0 ...
- bzoj 2006: [NOI2010]超级钢琴【st表+堆】
设计一个五元组(i,l,r,p,v),表示在以i为左端点,右端点落在(l,r)中的情况下,取最大值v时右端点落在p.把这个五元组塞到优先队列里,以v排序,每次取出一个,然后把这个取过的五元组分成两个( ...
- spoj 1693 COCONUTS - Coconuts【最小割】
s向所有信仰1的人连(s,i,1),所有信仰0的人连(i,t,1),对于朋友关系,连接双向边,流量为1.跑最大流的结果即为答案. 考虑这样做的意义.最小割就是把总点集分割为两个点集S,T,使得所有\( ...
- 【插件开发】—— 8 IPreferenceStore,插件的键/值存储!
前文回顾: 1 插件学习篇 2 简单的建立插件工程以及模型文件分析 3 利用扩展点,开发透视图 4 SWT编程须知 5 SWT简单控件的使用与布局搭配 6 SWT复杂空间与布局搭配 7 SWT布局详解 ...
- shiro错误:Subject does not have permission [user:select]
使用的是jdbcRealm,在数据库中有相应的权限 错误日志: org.apache.shiro.authz.UnauthorizedException: Subject does not have ...
- hasLayout原理【转】
项目中经常用到:*html .clearfix{ height:1%;} //IE6能识别*+html .clearfix{height:1%;} //IE7能识别1,有很多方式能触发hasLayo ...
- 题解报告:hdu1219AC Me
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1219 Problem Description Ignatius is doing his homewo ...
- Mac OS X:在标题栏上显示目录完整路径
众所周知mac的finder是不带路径显示的,你进入某个文件夹只会显示当前文件夹的名字而已.虽然你可以在finder的菜单栏中点“显示”-“显示路径栏”把路径栏调出来,但是这样只会不必要的增加find ...
- 在spring boot 中使用itext和itextrender生成pdf文件
转载请注明出处 https://www.cnblogs.com/majianming/p/9539376.html 项目中需要对订单生成pdf文件,在第一版本其实已经有了比较满意的pdf文档,但是还是 ...