I am using jquery-bootgrid Located here. http://www.jquery-bootgrid.com/GettingStarted
I created a bootgrid with fields one of them I want to edit so what I did was to specify it in the formatter.
formatters:
{
"fieldval": function(column, row)
{
return formatterForFieldval(column, row);
}
}
})
The function.
function formatterForFieldval(column, row)
{
return '<input type="text" class="form-control" id="usr" '
+ 'value="'+row.fieldval+'"'
+ '>' ;
}
This works and it creates a textbox that I can edit in runtime.
Now the next step is to save the modified data.
I use the following script to get the selected rows that the user modified.
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;
}
My issue is that var rowsc = $(tableId).bootgrid("getCurrentRows");
is not updated to the modified data that I typed into the textbox.. It still shows the old data (loaded data) before I modified the text box.
So when sending the array of rows to the database it updates to the same values.
How do I update var rowsc = $(tableId).bootgrid("getCurrentRows");
after I have modified the textbox ? Or am I doing it wrong?
To start with, as per my experience (as of this writing), getSelectedRows only returns the primary keys of the selected columns.
I have worked out your issue. Here are the modifications you need to make: 1. Let's assume your data-identifier column name is "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";
}
In the above code snippet, we have given a unique id to each row input.
2.getSelectedRowsAsJson should be refactored like this:
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.
});
}
I hope the above will help you solve your problem.