结合项目需要，写了一个datatable表编辑的js
var nEditing = null;
var nNew = false;
function restoreRow(oTable, nRow) {
var aData = oTable.$Table.fnGetData(nRow);
//console.log(aData);
//oTable.fnUpdate(aData["UPDATED"], nRow, 3, false);
oTable.fnDraw();
}
//dataTable编辑行
function editRow2(oTbale, nRow) {
var aData = oTbale.$Table.fnGetData(nRow);
var jqTds = $(‘>td‘, nRow);
jqTds[1].innerHTML = groupHtml;
jqTds[2].innerHTML = ‘<a class="edit" href="javascript:void(0);">Save</a>‘;
jqTds[3].innerHTML = ‘<a class="cancel" href="javascript:void(0);">Cancel</a>‘;
$("td>select").select2({
tags: true
});
if (!!aData.ASSIGNPERSON) {
var tempGroupVals = [];
aData.ASSIGNPERSON.split(",").forEach(function (e, i) {
$(nRow).find("option").each(function () {
if (e === $(this).text()) {
tempGroupVals.push($(this).val());
}
});
});
$(nRow).find("select").select2().val(tempGroupVals).trigger("change");
}
//nNew = true;
}
//保存行
function saveRow2(oTbale, nRow) {
if (!!nRow) {
oTable = oTbale.$Table;
var tempGroups = "";
$(nRow).find("li").each(function () {
if (!!$(this).attr("title")) {
tempGroups += "," + $(this).attr("title");
}
});
tempGroups = tempGroups.substr(1);
console.log($("#sel_menu2").select2().val());
//oTable.fnUpdate(tempGroups, nRow, 1, false);
oTable.fnUpdate(tempGroups, nRow, 2, false);
oTable.fnUpdate(‘<a class="edit" href="javascript:void(0);">Edit</a>‘, nRow, 3, false);
oTable.fnUpdate(‘<a class="delete" href="javascript:void(0);">Delete</a>‘, nRow, 4, false);
oTable.fnDraw();
}
}
//撤消该行
function cancelEditRow(oTable, nRow) {
console.log(oTable);
var jqInputs = $(‘input‘, nRow);
oTable.$Table.fnUpdate(jqInputs[0].value, nRow, 0, false);
oTable.$Table.fnUpdate(jqInputs[1].value, nRow, 1, false);
oTable.$Table.fnUpdate(jqInputs[2].value, nRow, 2, false);
oTable.$Table.fnUpdate(‘<a class="edit" href="">Edit</a>‘, nRow, 3, false);
oTable.$Table.fnUpdate(‘<a class="delete" href="">Delete</a>‘, nRow, 4, false);
oTable.$Table.fnDraw();
}
function ClickListen(oTable) {
oTable.$Table.on("click", ".edit", function (e) {
e.preventDefault();
/* Get the row as a parent of the link that was clicked on */
var nRow = $(this).parents(‘tr‘)[0];
//console.log("1", this.innerHTML);
//console.log("nRow", nRow);
if (nEditing !== null && nEditing !== nRow) {
/* Currently editing - but not this row - restore the old before continuing to edit mode */
restoreRow(oTable, nEditing);
editRow2(oTable, nRow);
nEditing = nRow;
} else if (nEditing == nRow && this.innerHTML === "Save") {
/* Editing this row and want to save it */
saveRow2(oTable, nEditing);
nEditing = null;
alert("Updated! Do not forget to do some ajax to sync with backend :)");
} else {
/* No edit in progress - let‘s start one */
editRow2(oTable, nRow);
nEditing = nRow;
}
});
oTable.$Table.on(‘click‘, ‘.delete‘, function (e) {
e.preventDefault();
if (confirm("Are you sure to delete this row ?") === false) {
return;
}
var nRow = $(this).parents(‘tr‘)[0];
oTable.$Table.fnDeleteRow(nRow);
alert("Deleted! Do not forget to do some ajax to sync with backend :)");
});
oTable.$Table.on(‘click‘, ‘.cancel‘, function (e) {
console.log(nNew);
e.preventDefault();
if (nNew) {
oTable.$Table.fnDeleteRow(nEditing);
nEditing = null;
nNew = false;
} else {
//restoreRow(oTable, nEditing);
cancelEditRow(oTable, nEditing);
nEditing = null;
}
});
}