1

新しいレコードを追加するためにプラグインを使用しています。この例では、[追加] ボタンをクリックすると、テーブル内のフィールドを含むサブフォームが開きます。サブフォームで [OK] をクリックすると、サブフォームに記載されている値を含む新しい編集可能な行がテーブルに作成されます。しかし、サブフォームを開かずに編集可能な行を追加する必要があります。また、ユーザーはテーブルに値を入力する必要があります。このコードは、「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");
            }
        }

上記のコードを編集して、サブフォームを開かずに行を追加しました。ただし、追加された行は編集できません。編集可能にするには、どのような変更を行う必要がありますか?

4

1 に答える 1

3

fnAddData を使用して行を追加し、その行を編集可能にします。行を編集可能にする方法を示す例を次に示します。

行を追加する未テストのコード (jquery datatables docs から取得)

var giCount = 2;

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

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

  giCount++;
}

編集 2: これがフィドルです。

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

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

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

これにはjEditableが必要になることに注意してください。

乾杯！

于 2012-10-08T07:01:32.627 に答える