I am deleting the records from a JqGrid using the Multiselect option.
grid.jqGrid('getGridParam', 'selarrrow')
Using the above line I get the user selected row ID's and make an ajax call, pass the ID's, and delete them from the DB.
My doubt is after deleting should I re form the grid or what is the best way to handle this?
Any working example would be great.
You could reload the grid, but that will cause another round-trip the server.
Alternatively, since you already have the ID's the rows you want to delete, you can just loop over that list and use delRowData method to delete them. This will provide a more responsive solution:
var rows = grid.jqGrid('getGridParam', 'selarrrow');
rows = rows.slice(); // Create a copy of the array since it
// is indirectly modified below
for (var i = 0; i < rows.length; i++){
jQuery('#mygrid').jqGrid('delRowData', rows[i]);
}
Due to the fact that as changes happen in the db the grid will be stale you may actually want to reload the grid in order to keep the data from going stale.
Related
I'm trying to preselect rows in my table but the table won't refresh unless there are changes to the actual data itself. Is there a method to reinit the table that doesn't involve changing the data?
It's also completely possible that my method for approaching this requirement is wrong and there may be a better way? I've created an example sandbox here:
https://codesandbox.io/s/mock-preselected-rows-data-t36nl?file=/src/App.js
In this you can see I have a mock response from my server for determining what rows should be selected. I'm then grabbing the data to compare to see if any of the items from the mock response exist in the data and if so push them to a new obj which is then fed into the intialState for selectedRowIds
Any guidance appreciated.
Seems your work is all working. The short answer to your question.
As long as you want the user see something, in a React way, it needs to be contained in a state, or state derivative. In your case, it's a cell data wrapped in row and in a table.
So you can't avoid selecting it without touching the data. Unless you don't want user see the change.
Although the checkbox doesn't seem to be part of the original data stream, when you develop on it, you have to make it part of the data. To be honest, it's easy you make it part of the data, because by the time you want to refresh the table, ex. selecting or de-selecting, or deleting a row, you want everything refreshed. Unfortunately it's very difficult to do local refresh with a table in React. It's possible, but very difficult, because most of the design is based on either prop or context.
You can also refactor your handleSelectedRows function.
// Find row ids and compare them with our 'preSelectedTheseItems' array.
const handleSelectedRows = () => {
const preIds = preSelectTheseItems.map(item => item.collectibleId)
return data?.filter((collectibleRow, index) => preIds.includes(collectibleRow.collectibleId));
};
Example : codesandbox
Is there any way to completely empty a ui-grid (filters,data, column and all)?
I'm trying to empty the grid on button-click so that a new http request can be made and the result displayed using the same grid without reloading the page.
I tried $scope.gridOptions.length=0 but the data remains and on making an new request, the result gets appended to the previous result
To empty a ui-grid data you will need to reinitialize via any array syntax.
$scope.gridOptions.data= [];
To clear all filters ,columns, you will need to later reinitialize the gridOptions itself via object literal syntax.
$scope.gridOptions= {};
Changing the length of grid doesn't make any effect on data. Try this:
$scope.gridOptions.data = {};
$scope.gridOptions.data = []; seems to work.. However it probably doesn't get rid of columns, which is what you wanted. In fact it clearly doesn't, this would be a normal thing to do if you wanted to clear the rows but keep the columns.
I am using jQuery DataTables 1.10.3 to create a table with JSON data fetched from a web service. The data is linked to other elements on the page of my application such that when a user selects data points in one element, the DataTable should update and 'select' the complimentary rows (simply by adding the active class to the rows <tr> tag). Given the documentation, it would appear that this could be easily accomplished with something like this:
var table = $("#my-table").DataTable();
table.rows().each(function(r){
if (r.data().category == 'XYZ'){
r.node().to$().addClass("active");
}
});
But this does not work, since .rows() returns an array of row indexes instead of row objects. Instead, I have implemented this:
var table = $("#my-table").DataTable();
table.rows().indexes().each(function(i){
var r = table.row(i);
if (r.data().category == 'XYZ'){
r.node().to$().addClass("active");
}
});
This works, but is incredibly slow, considering the relatively small number of records in the table (~3 seconds for 3000 rows). Is there a better way to iterate through DataTable rows that I am missing? Or is it possible to make a row selection based on data values? Are the documents incorrect about .rows() returning API objects?
Well, I found an answer to my second question:
Or is it possible to make a row selection based on data values?
var table = $("#my-table").DataTable();
table.rows(function(idx, data, node){
return data.category == 'XYZ' ? true: false;
}).nodes().to$().addClass("active");
This run almost instantly, so it handles my use case, but I'd still like to know what the best way is to iterate through rows in a more general way.
I have one table where I have 2 columns that get hidden by the dataTables api. From which when I delete a row from the table I need to pass the data in these columns via ajax so that it gets removed from the database as well..
I have been deleting my rows prior that didn't have data I need in them directly, without any issue. Now I need to change it up for this need and catch those values. Problem is no matter how I have tried to spin it one thing or another breaks.
delete_row = $(this).closest("tr").get(0);
This is what I used to catch the row I want to delete to pass it along when confirmation of deleting the row is made. And that works fine. Now I need to match the logic in creating two new vars that can be read if confirmation is made to pass through my ajax call.
Which I have tried:
var aPos = throttleTable.fnGetPosition($('td:eq(0)', delete_row));
var aData = throttleTable.fnGetData(aPos[0]);
Along with a few different spins to catch the column I want to get the data from. The above breaks the script altogether. The thought came from
var aPos = throttleTable.fnGetPosition(throttle_delete_row);
var aData = throttleTable.fnGetData(aPos[0]);
Which does work but only in returning every column in that row as a string. Which isn't desired. I would run a loop over it but that is problematic as a loop can be expensive, and also there is no distinct method of splitting the data up, as one of the values in one of the hidden columns is a CSV in it of itself. So the loop would be invalid for the need there as well if I split and delimited it by ,
So my ultimate question is, how can I break it down to get column specific?
Well, alright then. Apparently the problem was I was attempting to do to much when all I needed was the fnGetData() bit.
Turns out after playing around with whats actually going on and dumping it all into the console.log() I was able to sort out that all I truly needed to do was throttleTable.fnGetData(throttle_delete_row, 0) for sake of example, to get the hidden column(s) I seek.
$(document).ready(function() {
$('#example tbody td').click( function () {
// Get the position of the current data from the node
var aPos = oTable.fnGetPosition( this );
// Get the data array for this row
var aData = oTable.fnGetData( aPos[0] );
});
返回的都是数组，获取数组对应的下标就可以了！
Deletion operations seems to be the slowest in a YUI datatable. I have a datatable with > 300 rows. I need to delete selected rows. I tried removing the selected records from the recordset and then calling table.render() .. While this is okay, can it be made better?
Have a look at the API docs on the "deleteRow" method for the datatable widget (at http://developer.yahoo.com/yui/docs/YAHOO.widget.DataTable.html#method_deleteRow). This looks to me like this is what you'd want. Perhaps something like:
var selected = theDataTable.getSelectedRows();
var rset = theDataTable.getRecordSet();
for (var x = 0; x < selected.length; x++) {
theDataTable.deleteRow(rset.getRecordIndex(rset.getRecord(selected[x]))
}
No. This is slower than what I wrote.
Here you delete row by row and each time datatable has to be re-rendered.
What I did was remove these records from he recordset and then render the datable once.
Thats faster, but not a whole lot.
To my knowledge that is the fastest way to delete a row from a yui datatable. However, for your user's sake, unless 300 rows is necessary, you should consider pagination which is improved in version 2.6.0 (and has been split out and can now be used on other objects and not just DataTable).