datatable表编辑

结合项目需要，写了一个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;
        }
    });
}