数据表格新增一行的方法

分享 未结 0 326
王龙
王龙 2019-8-12
悬赏:20飞吻
功能:用户在选中一行后,使用右侧工具栏按钮的添加功能在选中行后自动增加一行,并且增加的一行可以被数据表格的各种事件监听。
实现:修改table.js代码增加如下函数:
/*key 为传入的数据表格的ID*/
/*data 为要附加的数据*/
//获取数据表格的缓存数据
I.prototype.getCacheData = function(key) {
return d.cache[key];
}
//将data数据附加到数据表格中
I.prototype.appendCacheData = function(key, data) {
d.cache[key].push(data);
}
//获取当前数据表格的行数
I.prototype.getCacheSize = function(key) {
return d.cache[key].length;
}
/*e,是数据表格的ID,会传递到table自己的函数中*/
//获取数据表格的缓存数据
d.getCacheData = function(e) {
var i = s(e);
if (i) {
var a = c.that[e];
return a.getCacheData(e);
}
}
//将data数据附加到数据表格中
d.appendCacheData = function(e, data) {
var i = s(e);
if (i) {
var a = c.that[e];
return a.appendCacheData(e, data);
}
}
//获取当前数据表格的行数
d.getCacheSize = function(e) {
var i = s(e);
if (i) {
var a = c.that[e];
return a.getCacheSize(e);
}
}
在自己的业务逻辑中要做如下操作:
前提:
(1)我封装了两个函数用来为数据表格增加数据和获取行数
//将data数据附加到数据表格中
function appendTableData(data) {
layui.use('table', function() {
var table = layui.table;
table.appendCacheData('layui-data-table', data);
});
}
//获取当前数据表格的行数
function getCacheSize() {
var size = 0;
layui.use('table', function() {
var table = layui.table;
size = table.getCacheSize('layui-data-table');
});
return size;
}
新增一行逻辑:
table.on('tool(proj-info)', function(obj) {
var data = obj.data;
if (obj.event === 'add') {
//当前行的索引
data["DATA_INDEX"] = $(this).parent().parent().parent().attr("data-index");
//当前数据行数
data["LAY_TABLE_INDEX"] = getCacheSize();
//新增加一行并将数据写入数据库
addRow(data);
}
});
//将数据写入数据库的部分这里不再描述
//项数据表中写入一条数据
function addRowByIndex(data) {
// 当前行的索引
var n = data.DATA_INDEX;
// 新增行的索引
var timeIndex = data.LAY_TABLE_INDEX;
//查找当前行
$('table').find('tr[data-index="' + n + '"]').each(function() {
//变更行索引
var trHtml = "<tr data-index='" + timeIndex + "'>"
trHtml = trHtml + $(this).html() + "</tr>";
//插入一行数据
$(this).after(trHtml);
});
//回写数据表格
appendTableData(data);
}
新手发帖望大神指教。
回帖
  • 消灭零回复