EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: Darrel on March 28, 2018, 09:16:09 AM



Title: Highlight searched text in datagrid cell [Solved]
Post by: Darrel on March 28, 2018, 09:16:09 AM
Hello team,

Is it possible to highlight the searched term in the doSearch function for a single search field on the grid?? For example, if I type 'ABCD' and if the data is present in the row object, then change the font color to red and background color to yellow of that matching cell.

The code is the same as the following link: https://www.jeasyui.com/forum/index.php?topic=5537.0 (https://www.jeasyui.com/forum/index.php?topic=5537.0)

Code:
function doSearch(inp) {
var rows = [];

inp = inp.toUpperCase();

var l_pageSize = $('#dg').datagrid('options').pageSize;

if(!table_data.length || l_pageSize != g_pageSize)
{
getTableData();
}

$.map(table_data, function(row){
for(var p in row)
{
var v = row[p];
var regExp = new RegExp(inp, 'i'); // i - makes the search case-insensitive.

if(regExp.test(String(v)))
{
//will I have to manipulate the rows here???
rows.push(row);
break;
}
}
});

if(inp != "")
{
alert("Found records: " + rows.length);
$('#dg').datagrid('loadData', rows);
}
}

Thanks & Regards,
Darrel


Title: Re: Highlight searched text in datagrid cell
Post by: jarry on March 28, 2018, 06:28:47 PM
To highlight the cells, you should define the 'styler' property on each column.
Code:
var regExp = null;
function doSearch(value){
regExp = value ? new RegExp(value, 'i') : null;
var data = $('#dg').datagrid('getData');
$('#dg').datagrid('loadData', data);
}
function cellStyler(value,row,index){
if (!regExp){return;}
value = String(value || '');
if (regExp.test(value)){
return 'color:red';
}
}

For more information please look at this example http://code.reloado.com/elexay3/edit#html,live


Title: Re: Highlight searched text in datagrid cell
Post by: Darrel on April 02, 2018, 04:55:02 AM
Hi jarry,

Thanks a lot for your reply. I've modified the code slightly as per my requirements.
The modified reloado code for the same is: http://code.reloado.com/elexay3/5/edit (http://code.reloado.com/elexay3/5/edit)

Regards,
Darrel


Title: Re: Highlight searched text in datagrid cell [Solved]
Post by: thecyberzone on April 03, 2018, 11:31:33 PM
Thanks jerry for your beautiful example. If I want automatic datagrid refresh with each keystorke in searchbox, rather than pressing search icon at the right side of search-box what modification I have to do?


Title: Re: Highlight searched text in datagrid cell [Solved]
Post by: jarry on April 04, 2018, 05:29:00 PM
You can press ENTER to do the same as clicking the search icon.


Title: Re: Highlight searched text in datagrid cell [Solved]
Post by: thecyberzone on April 06, 2018, 01:14:29 AM
Actually what I want, just to filter the datagrid output according to the keystroke of serachbox.