如何使用新數據更新Bootgrid所選行

Question

我正在使用jquery-bootgrid位於此處。 http://www.jquery-bootgrid.com/GettingStarted

我創建了一個bootgrid，其中一個字段是我想要編輯的，所以我所做的就是在格式化程序中指定它。

formatters: 
    { 
     "fieldval": function(column, row) 
     { 
      return formatterForFieldval(column, row); 
     } 
    } 
    }) 

函數。

function formatterForFieldval(column, row) 
{ 

     return '<input type="text" class="form-control" id="usr" ' 
      +  'value="'+row.fieldval+'"' 
      +  '>' ; 


} 

這有效，它創建一個我可以在運行時編輯的文本框。

現在下一步是保存修改後的數據。

我使用以下腳本來獲取用戶修改的選定行。

function getSelectedRowsAsJson(tableId) 
{ 

    var selectedRowsArray =[]; 
    var selectedRowsJsonArray = ""; 

    var rows = $(tableId).bootgrid("getSelectedRows"); 

    var arrayLength = rows.length; 

    for (var i = 0; i < arrayLength; i++) 
    { 
     var rowsc = $(tableId).bootgrid("getCurrentRows"); 

     var arrayLengthCurrent = rowsc.length; 
     for (var ii = 0; ii < arrayLengthCurrent; ii++) 
     { 

      if(rows[i]===rowsc[ii].id) 
      { 
       selectedRowsArray.push(rowsc[ii]) 
      } 
     } 

    } 

    selectedRowsJsonArray = JSON.stringify(selectedRowsArray); 
    console.log(selectedRowsJsonArray); 
    return selectedRowsJsonArray; 

} 

我的問題是，var rowsc = $(tableId).bootgrid("getCurrentRows");不更新到我輸入到文本框中修改的數據。它仍然顯示舊的數據（加載的數據）之前，我修改的文本框中。

因此，當將數組發送到數據庫時，它會更新爲相同的值。

如何在修改文本框後更新var rowsc = $(tableId).bootgrid("getCurrentRows");？還是我做錯了？

Answer 1

首先，根據我的經驗（撰寫本文時），getSelectedRows僅返回所選列的主鍵。

我已經解決了你的問題。下面是你需要做的修改： 1.假設你的數據標識符字段名是「pkcolumn」：

function formatterForFieldval(column, row) 
{ 
    return '<input type="text" class="form-control" id="pk' + row.pkcolumn + '" value="'+ row.fieldval + '">'; //Notice I have prefixed the id with an arbitrary litteral "pk"; 
} 

在上面的代碼片段中，我們都給予了唯一的ID，以每行輸入。

2.getSelectedRowsAsJson需要重構這樣的：

function getSelectedRowsAsJson() 
{ 
    var ids = $('#yourTableId').bootgrid('getSelectedRows'); //Here, remember that getSelectedRows only returns the values of the selected data-identifier columns (meaning, only the values of the selected pkcolumn (in this example) will be returned). 

    var myDataArray = []; //Create an array that will store the edited objects (key-value pairs) 
    $(ids).each(function (index, data) { 
     var editedData = {}; //Create an object to store the selected key-value pairs that have been edited. 
     editedData.key = data; 
     editedData.editedValue = $('#pk' + data).val(); //so here we retrieve the value of the input whose id equals "pkxxxx". In your example above, it could be "pk35630", and so on. 
     myDataArray.push(editedData); 
    }); 

    //If myDataArray has data then proceed. Otherwise, return 
    if(myDataArray.length === 0) 
     return; 
    //At this point, myDataArray will look like this: [{key: 'pk35630', editedValue: 'blue bla blue'}, {key: 'pk35635', editedValue: 'bla bla bla'}] 
    //Next, you can use myDataArray to post it through ajax and update your database accordingly, thereafter refresh the bootgrid. 

    var postdata = JSON.stringify(myDataArray); 
    $.ajax({ 
     url: your-url, 
     data: postdata, 
     type: 'post' 
    }).done(function (data, textStatus, jqXHR) { 
     //do your own stuff. for example, refresh/reload the bootgrid. 
    }); 
} 

我希望上面會幫您解決問題。