Bootgridで選択した行を新しいデータで更新する方法

Question

jquery-bootgridを使用しています。 http://www.jquery-bootgrid.com/GettingStarted

私は編集したいフィールドの1つを使ってブートグリッドを作成しましたので、私が行ったのはフォーマッタで指定することでした。

機能です。

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. 
    }); 
} 

私は上記はあなたの問題を解決するのに役立つことを願っています。