极客观点
项目管理
HarmonyOS
1.两个datatable; 第一个是点击添加的时候,出现在模态框中,异步请求数据;正常
2.添加选择的数据到另一个datatable2的时候,也是正常的,
3.datatable2列表中,删除(删除dom节点)数据A行后,表格重绘显示正常,但是从datatable1中再次添加A到datatable时,添加虽然成功, 原来删除消失的A行又出现了,出现了两行A数据;
4.第二次删除,我把表格数据中的需要删除的数据分离,重新组装后,表格重绘正常,但是再次添加删除的数据,依然出现在原来的位置;造成数据重复.
是这样的: tab1 是在一个模态框中显示的商品列表;数据源是ajax请求; tab2 是一个单纯的商品列表; 需求就是:点击添加商品;从tab1商品列表中,选择商品;添加到 tab2 中; 客户添加后,会在tab2中有删除商品的操作; 但是现在: 我测试时发现:tab2列表中删除后,再次从tab1中添加刚刚删除的商品, tab2 会同时显示刚删除的和刚添加的商品;也就是两个;如图示
请教一下,如何破?
ps:(如何修改源数据;之前用layui的数据表格也是这个问题;)
**datatable1是ajax请求数据源;
datatable2 是数据列表;不分页; 数据源是从datatable1中传过来的数组对象 ,显示从datatable1中添加的商品列表;**
var item = []
// 模态框中显示商品列表[json]
$(document).ready(function () {
$('#add-goods').click(function () {
var table = $('#myTable').DataTable({
// 开启服务器
serverSide: true,
'language': language,
'renderer': 'bootstrap',
'pagingType': 'simple_numbers',
// 数据源
"ajax": {
"url": document.URL,
"type": "POST",
data: function (param) {
// ajax 验证参数
param.action = "getAllGoods";
param.category = $('#goods-category').val() ? $('#goods-category').val() : 0;
// console.log("请求的参数：", param);
return param;
},
},
// 设置每列显示的字段
"columns": [
{data: 'id'},
{
data: 'thumb_url', render: function (data, type, row, meta) {
// url图片路径显示为图片
return "<img class='admin-list-img-size' src='" + data + "' />";
}
},
{data: 'name'},
{data: 'bar_code'},
{data: 'unit'},
{data: 'category_name'},
{data: 'direct'},
{data: 'num'},
{data: 'price'},
],
// 初始化回调函数
"initComplete": function (settings, json) {
// 监听分类的值 [动态数据需要用事件委托]
$(document).on('change', '#goods-category', function () {
// console.log(12)
table.ajax.reload();
})
// 点击选中行,标记 class
$('#myTable tbody').on('click', 'tr', function () {
$(this).toggleClass('selected');
})
},
})
// 保存选中的数据
$('#button-save').click(function () {
// 获取选中行的长度
var length = table.rows('.selected').data().length;
// console.log(length );
// 获取选中的所有数据
let data = table.rows('.selected').data();
let ids = getGoodsIds(); // 获取所有 id合集
// console.log(ids)
// 循环每一行
for (let i = 0; i < length; i++) {
// console.log(data[i])
// 1.获取当前数据的id, 表格中所有ids
let id = data[i].id;
// 2.存在跳出当前循环,继续执行后续代码
if ($.inArray(id, ids) >= 0) {
continue;
}
// 添加商品
item.push(data[i])
}
addRows(item)
// 隐藏modal
$('#myModal').modal('hide');
});
// 请求服务器失败打印错误信息
$.fn.dataTable.ext.errMode = function (settings, tn, msg) {
console.log(msg);
}
// 去除之前选中的标记
$('#myTable tbody').find('.selected').toggleClass('selected');
// 判断是否已经存在
if (!($('#goods-category').val() >= 0)) {
// 增加商品分类下拉框
$('#myTable_length').after(
"<div class=" + '"' + "dataTables_length" + '"' + "id=" + '"' + "goods-category2" + '"' + "style='margin-left: 200px;'>" +
"<select id='goods-category' name=" + '"' + "category" + '"' + "aria-controls=" + '"' + "myTable" + '"' + 'style="width: 200px;">' +
"<option value=" + '"' + "0" + '"' + ">请选择分类</option>" +
"{volist name='category_list' id='vo'}" +
"<option value=" + '"' + "{$vo['id']}" + '"' + ">{$vo['name']}</option>" +
"{/volist}" +
"</select></div>"
);
}
})
var goodsList = $('#goodsList').DataTable({
"paging": false,
"ordering": false,
'renderer': 'bootstrap',
'data': null,
"language": {
"sSearch": "搜索",
"sLengthMenu": "每页显示 _MENU_ 条记录",
"sZeroRecords": "抱歉， 没有找到",
"sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 件商品",
"sInfoEmpty": "没有数据",
"sInfoFiltered": "(从 _MAX_ 条数据中检索)",
"sProcessing": "<img src='./loading.gif' width='35px' height='35px' />",
"sZeroRecords": "没有检索到数据",
"emptyTable": "未选择促销的商品!"
},
// 设置复选框
select: {
style: 'os',
selector: 'td:first-child'
},
// 设置每列显示的字段
"columns": [{
"data": null,
"defaultContent": '',
"className": 'select-checkbox',
"orderable": false,
}, {
"data": null,
"title": '序号',
"className": "text-center",
"width": "30px",
render: function (data, type, row, meta) { /*显示行号*/
return 1 + meta.row;
}
}, {
"data": "id",
"title": 'ID'
}, {
"data": "name",
"title": '名称'
}, {
"data": "bar_code",
"title": '编号'
}, {
"data": "unit",
"title": '单位'
}, {
"data": "unit_group",
"title": '规格'
}, {
"data": "goods_code",
"title": '编号'
}, {
"data": "price",
"title": '入库价'
}, {
"data": "price",
"title": '单价'
}, {
"data": "price",
"title": '特价'
}, {
"data": "num",
"title": '每单限量'
}, {
"data": "num",
"title": '会员限量'
}],
// 初始化回调函数
"initComplete": function (settings, json) {
// 监听分类的值 [动态数据需要用事件委托]
// $(document).on('change', '#goods-category', function () {
// // console.log(12)
// table.ajax.reload();
// })
// 点击选中行,标记 class
// $('#myTable tbody').on('click', 'tr', function () {
// $(this).toggleClass('selected');
// })
},
})
// 重绘表格
function addRows(data) {
goodsList.clear();
goodsList.rows.add(data).draw();
}
// 获取所有 id合集
function getGoodsIds(){
let arr = []
goodsList.column(2).data().each(function (item) {
arr.push(item)
});
return arr
}
//删除点击行
$('#goodsList tbody').on('click', 'tr', function () {
let id = $(this).find('td:eq(2)').text() // 当前id
let res = []
goodsList.data().each(function (item) { // 去除需要删除的数据
if (id != item.id) {
res.push(item)
}
});
// 组装好;重绘
addRows(res)
