数据表CRUD操作

Question

我正在开发一个任务应用程序，它可以用任务的各种元数据跟踪任务。创建任务时，将这些选项保存到相关列表中。但是，元数据标记可能会随着任务的进行而更改。我使用数据表来显示选项。下面的代码加载完整的选项列表，然后是选中的条目，并组合成一个数组来跟踪更改。当按钮被按为主键或辅助键时，数组就会被更新为对项目的适当动作，也就是说，如果它是新的，则标记为创建。如果它具有列表ID号，则标记更新，最后标记具有列表ID但未选择删除的列表号。我的原型正在工作，但我不认为我以一种有效的方式做了，我担心如果我为第三选择添加第三个按钮，它将无法很好地扩展。嵌套的if语句已经很疯狂了

现在，选择一个新的主要将清除所有现有的次要选择。

let fullList = [
{id: "12",title: "A",code:"110"},
{id: "23",title: "B",code:"120"},
{id: "13",title: "C",code:"130"},
{id: "43",title: "D",code:"140"},
{id: "52",title: "E",code:"150"},
]
let selectList = [
{listID: "488",id:"23",code:"120",weight:"Primary"},
{listID: "234",id:"43",code:"140",weight:"Secondary"}
]
let workingList = [];
for (i = 0; i < fullList.length; i++) {
workingList.push({'rowId':i,'id':fullList[i].id,'title':fullList[i].title,'code':fullList[i].code,'listID':'','weight':'','operation':''});
};
for (var i=0;i<workingList.length;i++) {
for (var j=0;j<selectList.length;j++) {
if(workingList[i].code == selectList[j].code) {
workingList[i].operation = 'Read';
workingList[i].listID = selectList[j].listID;
workingList[i].weight = selectList[j].weight;
}
}
}
$(document).ready(function() {
var table = $('#myTable').DataTable({
processing: true,
data: workingList,
rowId: 'rowId',
columnDefs: [
{
orderable: false
},
],
columns: [
{ data: 'title' },
{ data: 'code' },
{ data: 'weight'},
{ data: 'operation' },
{ data: 'listID' },
{defaultContent: '<button class="btn-primary bg-primary">Primary</button>'},
{defaultContent: '<button class="btn-secondary bg-secondary">Secondary</button>'},
],
"rowCallback": function (row, data) {
if (data.weight == "Primary") {
$('td',row).eq(2).addClass('selected').addClass('bg-primary');
}
if (data.weight == "Secondary") {
$('td',row).eq(2).addClass('selected').addClass('bg-secondary');
}
}
}); 
$('#myTable tbody').on('click', 'button.btn-primary', function () {
var tr = $(this).closest('tr');
var row = table.row(tr);
var id = row.data().rowId;
if ($(this).eq(2).hasClass('selected')) {
$(this).eq(2).removeClass('selected');
workingList[id].weight = '';
if (workingList[id].operation == 'Read' || workingList[id].operation == 'Update') {
workingList[id].operation = "Delete";
}
else {workingList[id].operation = ""};
} else {
table.$('tr.selected').removeClass('selected');
$(this).eq(2).addClass('selected');
workingList[id].weight = 'Primary';
for (i = 0; i < workingList.length; i++) {
if (i != id) {
workingList[i].weight = "";
if (workingList[i].listID != "") {
workingList[i].operation = "Delete";
}
else if (workingList[i].operation == "Create") {
workingList[i].operation = "";
}
}
}
if (workingList[id].listID == '') {
workingList[id].operation = "Create";
}
else {workingList[id].operation = "Update"};
}
table.clear().draw();
table.rows.add(workingList); // Add new data
table.columns.adjust().draw(); // Redraw the DataTable
console.log(workingList[id]);
});
$('#myTable tbody').on('click', 'button.btn-secondary', function () {
var tr = $(this).closest('tr');
var row = table.row(tr);
var id = row.data().rowId;
if ($(this).eq(2).hasClass('selected')) {
$(this).eq(2).removeClass('selected');
workingList[id].weight = '';
if (workingList[id].operation == 'Read' || workingList[id].operation == 'Update') {
workingList[id].operation = "Delete";
}
else {workingList[id].operation = ""};
} else {
table.$('tr.selected').removeClass('selected');
$(this).eq(2).addClass('selected');
workingList[id].weight = 'Secondary';
for (i = 0; i < workingList.length; i++) {
if (i != id){
if (workingList[i].weight != 'Primary') {
workingList[i].weight = "";
};
if (workingList[i].listID != "") {
if (workingList[i].weight != 'Primary') {
workingList[i].operation = "Delete";
}
}
else if (workingList[i].operation == "Create") {
if (workingList[i].weight != 'Primary') {
workingList[i].operation = "";
}
}
}
}
if (workingList[id].listID == '') {
workingList[id].operation = "Create";
}
else {workingList[id].operation = "Update"};
}
table.clear().draw();
table.rows.add(workingList); // Add new data
table.columns.adjust().draw(); // Redraw the DataTable
console.log(workingList[id]);
});
})

http://live.datatables.net/salohoro/1/也是一个工作副本。如能提供有关效率和可扩展性的建议，我将不胜感激。

Answer 1

一些非常小的调整，

我改变

if (workingList[i].weight != 'Primary') {
workingList[i].weight = "";
};
if (workingList[i].listID != "") {
if (workingList[i].weight != 'Primary') {
workingList[i].operation = "Delete";
}
}
else if (workingList[i].operation == "Create") {
if (workingList[i].weight != 'Primary') {
workingList[i].operation = "";
}
}

if (workingList[i].weight !== 'Primary') {
workingList[i].weight = "";
if (workingList[i].listID !== "") {
workingList[i].operation = "Delete";
}
else if (workingList[i].operation === "Create") {

以减少需要检查的次数!== 'Primary'

我改了"="= = ="one_answers"! =";"! = ="因为这是更好的实践，以确保精确匹配和更改变量为let和const，以确保更好的数据类型一致性

至于for循环，它们实际上表现得更好，请参阅循环类型和各自性能结果的比较:https://github.com/dg92/Performance-Analysis-JS

其余的看起来发现，如果你发现它的规模，你遇到性能问题，然后可能重构出一些逻辑成单独的函数，你可以调用Web worker，他们将真正有助于提高性能，见https://medium.com/jspoint/achieving-parallelism-in-javascript-using-web-workers-8f921f2d26db

let fullList = [
{ id: "12", title: "A", code: "110" },
{ id: "23", title: "B", code: "120" },
{ id: "13", title: "C", code: "130" },
{ id: "43", title: "D", code: "140" },
{ id: "52", title: "E", code: "150" },
]
let selectList = [
{ listID: "488", id: "23", code: "120", weight: "Primary" },
{ listID: "234", id: "43", code: "140", weight: "Secondary" }
]
let workingList = [];
for (i = 0; i < fullList.length; i++) {
workingList.push({ 'rowId': i, 'id': fullList[i].id, 'title': fullList[i].title, 'code': fullList[i].code, 'listID': '', 'weight': '', 'operation': '' });
};
for (let i = 0; i < workingList.length; i++) {
for (let j = 0; j < selectList.length; j++) {
if (workingList[i].code === selectList[j].code) {
workingList[i].operation = 'Read';
workingList[i].listID = selectList[j].listID;
workingList[i].weight = selectList[j].weight;
}
}
}
$(document).ready(function () {
const table = $('#myTable').DataTable({
processing: true,
data: workingList,
rowId: 'rowId',
columnDefs: [
{
orderable: false
},
],
columns: [
{ data: 'title' },
{ data: 'code' },
{ data: 'weight' },
{ data: 'operation' },
{ data: 'listID' },
{ defaultContent: '<button class="btn-primary bg-primary">Primary</button>' },
{ defaultContent: '<button class="btn-secondary bg-secondary">Secondary</button>' },
],
"rowCallback": function (row, data) {
if (data.weight === "Primary") {
$('td', row).eq(2).addClass('selected').addClass('bg-primary');
}
if (data.weight === "Secondary") {
$('td', row).eq(2).addClass('selected').addClass('bg-secondary');
}
}
});
$('#myTable tbody').on('click', 'button.btn-primary', function () {
let tr = $(this).closest('tr');
let row = table.row(tr);
let id = row.data().rowId;
if ($(this).eq(2).hasClass('selected')) {
$(this).eq(2).removeClass('selected');
workingList[id].weight = '';
if (workingList[id].operation === 'Read' || workingList[id].operation === 'Update') {
workingList[id].operation = "Delete";
}
else { workingList[id].operation = "" };
} else {
table.$('tr.selected').removeClass('selected');
$(this).eq(2).addClass('selected').addClass('bg-primary');
workingList[id].weight = 'Primary';
for (let i = 0; i < workingList.length; i++) {
if (i !== id) {
workingList[i].weight = "";
if (workingList[i].listID !== "") {
workingList[i].operation = "Delete";
}
else if (workingList[i].operation === "Create") {
workingList[i].operation = "";
}
}
}
if (workingList[id].listID === '') {
workingList[id].operation = "Create";
}
else { workingList[id].operation = "Update" };
}
table.clear().draw();
table.rows.add(workingList); // Add new data
table.columns.adjust().draw(); // Redraw the DataTable
console.log(workingList[id]);
});
$('#myTable tbody').on('click', 'button.btn-secondary', function () {
let tr = $(this).closest('tr');
let row = table.row(tr);
let id = row.data().rowId;
if ($(this).eq(2).hasClass('selected')) {
$(this).eq(2).removeClass('selected');
workingList[id].weight = '';
if (workingList[id].operation === 'Read' || workingList[id].operation === 'Update') {
workingList[id].operation = "Delete";
}
else { workingList[id].operation = "" };
} else {
table.$('tr.selected').removeClass('selected');
$(this).eq(2).addClass('selected');
workingList[id].weight = 'Secondary';
for (let i = 0; i < workingList.length; i++) {
if (i !== id) {
if (workingList[i].weight !== 'Primary') {
workingList[i].weight = "";
if (workingList[i].listID !== "") {
workingList[i].operation = "Delete";
}
else if (workingList[i].operation === "Create") {
workingList[i].operation = "";
}
}
}
}
if (workingList[id].listID == '') {
workingList[id].operation = "Create";
}
else { workingList[id].operation = "Update" };
}
table.clear().draw();
table.rows.add(workingList); // Add new data
table.columns.adjust().draw(); // Redraw the DataTable
console.log(workingList[id]);
});
})

我希望这对你有帮助