layui表格动态新增行

当点击添加一行时动态添加一行：

首先定义表格：
<%-- 表格–%>

添加一行

然后就是 table初始化：
table.render({
elem: ‘#tabAddSell’,//table元素
id: ‘tabAddSell’,
page: false,
data:[],//这里赋初始值
cols: [[
{title: ‘序号’, width: 120,type:‘numbers’,totalRowText: ‘合计’},
{field: ‘id’, title: ‘id’, event: ‘id’, width: 120, hide: true},
{field: ‘right’, title: ‘操作’,width:80,align: ‘center’, templet: function(rowData){
return ‘移除’;}},
…
]],
});

//添加行
$("#addRow").on(“click”, function() {
tableActive.addNewRow();
});

//监听工具条，删除行
table.on(“tool(tabAddSell)”, function (obj) {
var data = obj.data,
event = obj.event,
tr = obj.tr; //获得当前行 tr 的DOM对象;
console.log(data);
switch(event){
case “del”:
obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
tableActive.deleteRow();
break;
}}

//定义表格操作
var tableActive = {
//添加行
addNewRow: function() {
//获取表格当前数据
var newData = table.cache[“tabAddSell”];
//新行数据
var newRow= {
“Id”:Data.length,
… //给新行空数据
};
//将新行插入表格数据中
newData.push(newRow);

//使用新数据重载表格
table.reload(“tabAddSell”,{
data: newData
});
//删除行
deleteRow: function() {
discountAllMoney=0;
Data = table.cache[“tabAddSell”];
Data.splice(Data.length-1, 1);//删除最后一项空值
var boll=false;
for(var i=0, row; i < Data.length; i++){
row = Data[i];
//在table工具栏监听时删除对应行dom结构
//行不存在则从数据中删除
if(row.Id===undefined){
Data.splice(i,1);//删除一项
boll=true;
CommodityNameR.splice(i,1);
}
if (boll){
for (var v=i;v<Data.length;v++){
Data[i].Id=Data[i-1].Id+1;//给id重新排序
}
}
continue;
}
table.reload(“tabAddSell”,{
data : Data
});

}

layui表格动态新增行相关推荐

html 整行选择状态,Layui表格选中指定行的radio单选框并滚动到该行的实现代码
layui table有多行数据,通过外部输入内容,需要定位到指定行,选中改行,对改行进行操作. 实现效果: HTML代码: 获取选中行数据设置选中行 layui.use('table', func ...
easy ui 可编辑表格，新增行某个字段可以修改，已经存在的数据不允许修改
1. 问题描述,easy ui 可编辑表格,在添加的时候可以进行编辑标题,已经存在的数据不允许编辑标题 2.解决问题的主要方法是区别新增数据和已有数据的区别,easy ui 自带的属性并没又找到区别的 ...
el-table表格动态合并行、合并行列及详解
layui 表格行单击事件选中行前的单选框
layui表格中,行点击事件同时选中行前的单选框. //表格监听行单击事件table.on('row(test)', function(obj) {//选中行前radioTable.isCheckRa ...
Vue+Element表格动态列+表格分页
LayUI表格动态列及分页LayUI+JavaScript表格动态列+表格分页效果如图: 代码: 引用JQuery,Vue,Element等文件,换成自己的路径 <!DOCTYPE html& ...
Layui数据表格中动态插入行插入下拉框
想要在已加载的layui数据表格动态的插入一行,首先要在加载表格的时候设置它的event值.因为我这里是点击序号就添加一行,所以我在序号中设置了它的event值!当然在静态表格当中也是一样的操作,在你 ...
前端框架Layui实现动态表格效果用户管理实例（对表格进行CRUD操作-附源码）
目录一.前言 1.什么是表格 2.表格的使用范围二.案例实现 1.案例分析 ①根据需求找到文档源码 ②查询结果在实体中没有该属性 2.dao层编写 ①BaseDao工具类 ②UserDao编写 3 ...
javascript动态创建表格：新增、删除行和列
利用js来动态创建表格有两种格式,appendChild()和insertRow.insertCell().两种方式其实差不多,但第一种有可能在IE上有问题,所以推荐大家使用第二种了,直接说吧. 1. ...
javascript 动态创建表格：新增、删除行和单元格
2019独角兽企业重金招聘Python工程师标准>>> 利用js来动态创建表格有两种格式,appendChild()和insertRow.insertCell().两种方式其实差不多 ...

layui表格动态新增行

layui表格动态新增行相关推荐

最新文章

热门文章