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。

干杯！

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

1 个答案: