How to implement "Find and Replace" logic in Handsontable? - javascript

As we have find and replace logic in Excel and many other documents, how to implement the same using Handsontable? I tried to find the same in the Handsontable site but could not find. All i could find was "search" using searchbox.
Im new to Handsontable. Any help on this would be great.

You can easily reuse the search function already present in the Handsontable documentation example for the first part of the problem.
You then have to add a field where you can put the value you want to replace the cells that have been match, and use the below simple function to replace those values by the new one :
Handsontable.dom.addEvent(Replace, 'click', function() {
// Replace the value of every cell that have been match by the search query
for (row = 0, r_len = queryResult.length; row < r_len; row++) {
hot.setDataAtCell(queryResult[row].row, queryResult[row].col, replace);
}
// Reset all the fields
SearchField="";
ReplaceField="";
queryResult="";
document.getElementById('Search').value='';
document.getElementById('ReplaceWith').value='';
});
See this working jsFiddle example.

Adding to https://stackoverflow.com/a/50228873/9230481
Note that this fail if you enable any form of sorting or filtering (e.g. columnSorting: true) because the matches in „visual indices“, which change after sorting. To solve this you need map the indices to physical ones right after the search finished. See https://handsontable.com/docs/api/core/#tophysicalrow and https://handsontable.com/docs/api/core/#tophysicalcolumn
In the replace function you need to map physical indices back to visual indices as setDataAtCell expects visual indices: https://handsontable.com/docs/api/core/#setdataatcell

Related

DataTables - Search in multiple columns with a single drop down

I'm working with DataTables and i'm trying to search a result in a table with a dropdown. But rather than searching one column, I need to search in two specific columns.
The below syntax works with a single column but how do i do it with multiple columns?
var table = $('#example1').DataTable();
$("#filter").on('change', function() {
table.column([4]).search($(this).val()).draw();
});
I tried doing this but when i use this code it only searches the result in the first column, E.g. 4th Column. and ignores the rest.
table.column([4,5]).search($(this).val()).draw();
What is the proper method for this?
Lets summarize all things here. It will help other people as well.
You can achieve this as follow:
table.column(4).search(this.value).column(5).search(this.val‌​ue).draw();
It will perform search on 4 column (4 is index of column), after that it will filter data from 5 column against provided filter value and at the end it will draw the table.
One thing to keep in mind is that Filter is applied on both columns, so both columns must contains matching data.
Here is its filddle
This can be achieved by using fnMultiFilter as it documentation explains:
This plug-in adds to DataTables the ability to set multiple column filtering terms in a single call (particularly useful if using server-side processing). Used in combination with the column sName parameter, simply pass in an object with the key/value pair being the column you wish to search on, and the value you wish to search for.
Use columns() in place of column():
var table = $('#example1').DataTable();
$("#filter").on('change', function() {
table.columns([4,5]).search($(this).val()).draw();
});
From the doc, you should be using .columns() (note the plural)
For an OR search among multiple columns, disable columns for the search using
columns.searchableSince: Enable or disable search on the data in a certain column.
Alternatively, you can also use an HTML attribute to remove the column from the search
<th data-searchable=false>

Tablesorter Custom Filter Function - Full Table Filter

I have a tablesorter, with 2 filter Columns. The first Filter works as a drop down and has no issues right now. The second filter is intended to be a full table search and filter mechanism.
That is to say, even though it is associated with the computer column, it should return results for child rows as well
The Computer Filter should respond to all child rows. For instance, if I searched for z840, , only Computers with Model z840 should appear.
However, I have a custom secondary filter mechanism by request The gauge at the top, works as a filter for workgroup
However, If I am filtered in a workgroup, and use the Computer Filter, it ignores the custom hidden rows, and searches against any row in the table. (Child Row Searching works fine).
My Question is, Is there a way to overwrite the functionality of the filter, to ignore any rows that are already satisfying some condition IE: $(row).hasClass('hide')
I have tried using filter_functions but every result ends up searching on computer name only
I am using Jinja Templating so it was a little hard to get a fiddle up and running but here is a sample.
http://jsfiddle.net/brianz820/856bzzeL/813/
Sort by wg02 (at top, no results), and then use the computer filter to search for say, 3.3. No results show up, but once you delete the search, the original workgroup filter is removed.
On my production copy, even typing 3.3 would have returned results for any workgroup, ignoring the filter.
There may be lots of extraneous code on Fiddle, just wanted to get a working version up
Thanks for reading, Goal to maintain free form child searching and filtering on filter selection, but maintain external hidden rows.
if there is any more required information please let me know
I'm not exactly sure if this is what you meant, but the hideRows function can be simplified by using the filter widget (demo):
function hideRows() {
var $table = $('.tablesorter'),
filters = $.tablesorter.getFilters( $table );
filters[2] = selected === 'All' ? '' : selected;
$.tablesorter.setFilters( $table, filters );
}

Select list search on very large dataset

Currently I have Select2 in my application, and have previously implemented ajax calls to the database to get a smaller subset based on search query entered by a user.
However, users want to be able to click the back arrow on the browser, and have the query automatically run again (something that currently does not happen with Select2). I was able to implement this by pulling the entire dataset (over 18,000 elements) in and calling select2 on that.
The problem with this is that Select2 basically does a foreach in a foreach when doing a search (foreach element in the dataset, go through each string and get the index of the query - which I understand is basically breaking the string into a char array and checking each char individually to see if the combination is found). So every time someone types a character, we're looking at over 18,000 operations, even though the majority of elements are eliminated as options.
Is there a way to make Select2 actually eliminate the options that don't match (create and bind to a temp array or something like that) or perform a binary search instead of a linear search? If not, are there any alternatives to Select2 that DO implement binary search instead of linear search, or would I need to create my own jQuery plugin to do this?
In this jsfiddle1 a hidden select element is used and a clone of that to filter input. The filtering is done with:
for (var i = 0; i < that.selector.options.length; i++) {
if (re.test(that.selector.options[i].text)) {
sclone.add(new Option(that.selector.options[i].text, i));
}
}
Where re is a RegExp created from an input field that placed above the select clone.
Maybe that's an idea to play with?
1 The language used in the first selector is dutch, but I suppose that shouldn't be obstructive to the idea.

How to implement query function to use Google spreadsheet as a database?

I'm trying to use a spreadsheet as a database, where each sheet would be a table and the name of a person is used as a primary key (It seems not to be the best solution, but the good spreadsheet interface makes me prefer this solution rather than trying to use ScriptDB.)
And I want to do the following: When you select a name on a sheet and press a button on the menu I added, a function performs a search in another table and a screen and shows all the results of that query in the other table, showing properties records that only that table contains (later I want to add the possibility to generate a text file from a GDocs template).
My questions is:
1) Considering this screen/panel UI has a variable length (because the record number may vary in other tables), what is the best way to create this panel/UI in Google Apps Script? (I don't want to use the Logger.log because I want to add a button to convert the query into a file)
2) In addition to this solution (a search in the resulting 2D array):
function test(){ // to test the find function with an argument, 'any' in this case
var result = findItem('any');
if(result){Logger.log(result.getA1Notation())}else{Logger.log('no luck !')};
}
function findItem(item){
var ss = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
var data = ss.getDataRange().getValues()
for(var n = 0;n<data.length;++n){
if(data[n].indexOf(item)>-1){ // this is a "strict" find, ie the value must be the entire search item. If you want to do partial match you should compare differently...
return (ss.getRange(n+1,data[n].indexOf(item)+1)); // if found return the range. note the +1 because sheets have 1 index while arrays have 0 index
}
}
return false;// if we come to the end of sheet without result...
}
There is an alternative method to perform queries like this?
THANKS for any help!
Create a UI instance. Then a scrollable panel inside a main panel is the best way of doing this and then using array's to search through the data. I typically create header body and footer panels with the body being scrollable

Javascript populate HTML table given cell data

I have an html table with cells that can be edited when clicked on. I am trying to figure out the best method to change cell data in cells following an edited cell.
For example, say the table comes populated by random numbers or letters. When I changed a cell to "14" I want the cells after it to change automatically to 15, 16, 17,n+1..ect. Or if I entered "h" the following cells would change to i,j,k,l...z stopping at z.
The number one seems pretty easy as I could just create a loop and i++ for each cell. However, the letter one doesn't seem as simple. Would I need to create an alphabet array and find the edited cell letter within it then proceed to the end of the array inserting each into the follow cells?
This can actually be done with a fairly simple function call like this one:
function NextChar(c){
return String.fromCharCode(c.charCodeAt(0) + 1);
}
where c is the alphabetic character that is entered into the cell, passed as a parameter.
I can see this question was done quite some time ago, so this answer is more for people who make come seeking answers later.
I would make arrays with character sequences as you said and use the jQuery.inArray() API to detect which sequence the edited cells content is in.
Check it out: http://api.jquery.com/jQuery.inArray/

Categories