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

我使用插件this來添加新記錄。在這個例子中，當點擊'添加'按鈕時，一個子窗體打開並顯示錶中的字段。然後在子窗體中單擊確定，使用子窗體中提到的值在表中創建一個新的可編輯行。但我需要添加一個可編輯的行而不打開子窗體。用戶必須在表格中輸入值。此代碼用於添加「jquery.dataTables.editable.js」文件中子表單的一行。在jquery-datatables-editable插件中添加行

///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"); 
      } 
     }

我編輯了上面的代碼來添加一行而不打開子窗體。但添加的行不可編輯。我應該做些什麼才能使其可編輯？

來源

2012-10-08 Smith Dwayne

使用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爲此。

乾杯！

來源

2012-10-08 07:01:32 bhb

我已經試過「DataTables編輯示例」。有一個問題。如果我編輯元素，editable_ajax.php被調用來更新服務器中的記錄。我想要做的只是在用戶提交表單時更新記錄，直到所做的更改應該顯示在瀏覽器中。 –

如果你檢查上面的小提琴鏈接，當你編輯他們不提交的單元格。基本上我刪除了ajax調用。 – bhb

http://jsfiddle.net/GrfPB/5/。我試過這個。但編輯文本'主'後，我得到錯誤。編輯不正確。另一個新添加的行不可編輯。 –

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

回答

相關問題