在 jquery-datatables-editable 插件中添加行

Question

我正在使用插件this 添加新记录。在此示例中，单击“添加”按钮时，将打开一个子表单，其中包含表中的字段。在子表单中单击“确定”后，将在表中创建一个新的可编辑行，其中包含子表单中提到的值。 但是我需要在不打开子表单的情况下添加一个可编辑的行。用户必须在表中输入值。 此代码用于从“jquery.dataTables.editable.js”文件中的子表单添加一行。

///Event handler called when a new row is added and response is returned from server
        function _fnOnRowAdded(data) {
            properties.fnEndProcessingMode();

            if (properties.fnOnNewRowPosted(data)) {

                var oSettings = oTable.fnSettings();
                var iColumnCount = oSettings.aoColumns.length;
                var values = new Array();

                $("input:text[rel],input:radio[rel][checked],input:hidden[rel],select[rel],textarea[rel],span.datafield[rel]", oAddNewRowForm).each(function () {
                    var rel = $(this).attr("rel");
                    var sCellValue = "";
                    if (rel >= iColumnCount)
                        properties.fnShowError("In the add form is placed input element with the name '" + $(this).attr("name") + "' with the 'rel' attribute that must be less than a column count - " + iColumnCount, "add");
                    else {
                        if (this.nodeName.toLowerCase() == "select" || this.tagName.toLowerCase() == "select")
                            sCellValue = $("option:selected", this).text();
                        else if (this.nodeName.toLowerCase() == "span" || this.tagName.toLowerCase() == "span")
                            sCellValue = $(this).html();
                        else
                            sCellValue = this.value;

                        sCellValue = sCellValue.replace(properties.sIDToken, data);
                        values[rel] = sCellValue;
                    }
                });

                //Add values from the form into the table
                var rtn = oTable.fnAddData(values);
                var oTRAdded = oTable.fnGetNodes(rtn);
                //Apply editable plugin on the cells of the table
                _fnApplyEditable(oTRAdded);
                //add id returned by server page as an TR id attribute
                properties.fnSetRowID($(oTRAdded), data);
                //Close the dialog
                oAddNewRowForm.dialog('close');
                $(oAddNewRowForm)[0].reset();
                $(".error", $(oAddNewRowForm)).html("");

                _fnSetDisplayStart();
                properties.fnOnAdded("success");
            }
        }

我编辑了上面的代码来添加一行而不打开子表单。但添加的行不可编辑。我应该做哪些更改才能使其可编辑？

Answer 1

使用 fnAddData 添加行，然后使该行可编辑。这是一个example，它显示了如何使行可编辑。

添加行的未经测试的代码（取自 jquery 数据表文档）

var giCount = 2;

$(document).ready(function() {
  $('#example').dataTable();
} );

function fnClickAddRow() {
  $('#example').dataTable().fnAddData( [
    giCount+".1",
    giCount+".2",
    giCount+".3",
    giCount+".4" ]
  );

  giCount++;
}

编辑 2：这是fiddle。

var oTable = $("table").dataTable();

$("a").click(function() {
    $(oTable).dataTable().fnAddData( ["test"] );
});

$('td', oTable.fnGetNodes()).editable(function(v, s) {
    console.log(v);
    return (v);
});

请注意，您需要jEditable。

干杯！