Title: How to add auto search box for easyui datagrid
Post by: Vilisag on December 11, 2014, 01:34:59 AM
Hi all,
I use easyui datagrid for my project, but i don't know how to add auto search box in toolbar of easyui datagrid.
Please help me, thank for help.
Title: Re: How to add auto search box for easyui datagrid
Post by: stworthy on December 11, 2014, 07:33:29 AM
Please learn this tutorial http://www.jeasyui.com/tutorial/datagrid/datagrid24.php
Title: Re: How to add auto search box for easyui datagrid
Post by: Vilisag on December 18, 2014, 10:04:29 AM
Thanks stworthy, but i need search box auto filter when user type keyword same as datatable jquery https://datatables.net/
Title: Re: How to add auto search box for easyui datagrid
Post by: Aod47 on October 07, 2018, 09:40:18 PM
try adapt on keypress event with code below <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>DataGrid Single Search</title>
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<div id="tb" style="padding:3px">
<span>Keyword</span>
<input id="keyword" style="line-height:22px;border:1px solid #ccc">
<a href="#" class="easyui-linkbutton" plain="true" onclick="var q=$('#keyword').val();doSearch(q)">Search</a>
</div>
<table id="dg" class="easyui-datagrid" style="width:700px;height:250px" singleSelect="true" method="get"
title="Load Large Data" iconCls="icon-ok" autoRowHeight="false">
<thead>
<tr>
<th data-options="field:'inv'" width="80">Inv No</th>
<th data-options="field:'date'" width="120">Date</th>
<th data-options="field:'name'" width="80">Name</th>
<th data-options="field:'amount'" width="80" align="right">Amount</th>
<th data-options="field:'price'" width="80" align="right">Price</th>
<th data-options="field:'cost'" width="100" align="right">Cost</th>
<th data-options="field:'note'" width="130">Note</th>
</tr>
</thead>
</table>
<script type="text/javascript">
var data = [
{"inv":"INV0001","date":"2018-10-09","name":"Name1","note":"Note1","amount":60,"price":"103.95","cost":"6237.00"},
{"inv":"INV0002","date":"2018-10-10","name":"Name2","note":"Note2","amount":66,"price":"120.17","cost":"7931.22"},
{"inv":"INV0003","date":"2018-10-11","name":"Name3","note":"Note3","amount":91,"price":"193.34","cost":"17593.94"},
{"inv":"INV0004","date":"2018-10-12","name":"Name4","note":"Note4","amount":77,"price":"139.54","cost":"10744.58"},
{"inv":"INV0005","date":"2018-10-13","name":"Name5","note":"Note5","amount":97,"price":"117.96","cost":"11442.12"},
{"inv":"INV0006","date":"2018-10-14","name":"Name6","note":"Note6","amount":97,"price":"160.11","cost":"15530.67"},
{"inv":"INV0007","date":"2018-10-15","name":"Name7","note":"Note7","amount":67,"price":"184.01","cost":"12328.67"},
{"inv":"INV0008","date":"2018-10-16","name":"Name8","note":"Note8","amount":86,"price":"119.36","cost":"10264.96"},
{"inv":"INV0009","date":"2018-10-17","name":"Name9","note":"Note9","amount":81,"price":"174.36","cost":"14123.16"},
{"inv":"INV0010","date":"2018-10-18","name":"Name10","note":"Note10","amount":57,"price":"195.63","cost":"11150.91"},
{"inv":"INV0090","date":"2019-01-06","name":"Name90","note":"Note90","amount":63,"price":"182.95","cost":"11525.85"},
{"inv":"INV0091","date":"2019-01-07","name":"Name91","note":"Note91","amount":69,"price":"122.54","cost":"8455.26"},
{"inv":"INV0092","date":"2019-01-08","name":"Name92","note":"Note92","amount":53,"price":"163.73","cost":"8677.69"},
{"inv":"INV0093","date":"2019-01-09","name":"Name93","note":"Note93","amount":95,"price":"176.82","cost":"16797.90"},
{"inv":"INV0094","date":"2019-01-10","name":"Name94","note":"Note94","amount":58,"price":"148.96","cost":"8639.68"},
{"inv":"INV0095","date":"2019-01-11","name":"Name95","note":"Note95","amount":79,"price":"149.70","cost":"11826.30"},
{"inv":"INV0096","date":"2019-01-12","name":"Name96","note":"Note96","amount":53,"price":"148.74","cost":"7883.22"},
{"inv":"INV0097","date":"2019-01-13","name":"Name97","note":"Note97","amount":84,"price":"199.88","cost":"16789.92"},
{"inv":"INV0098","date":"2019-01-14","name":"Name98","note":"Note98","amount":93,"price":"185.31","cost":"17233.83"},
{"inv":"INV0099","date":"2019-01-15","name":"Name99","note":"Note99","amount":66,"price":"116.29","cost":"7675.14"},
{"inv":"INV0100","date":"2019-01-16","name":"Name100","note":"Note100","amount":71,"price":"104.71","cost":"7434.41"}
]
function doSearch(q){
var rows = [];
$.map(data, function(row){
for(var p in row){
var v = row[p];
var regExp = new RegExp(q, 'i'); // i - makes the search case-insensitive.
if(regExp.test(String(v))) {
rows.push(row);
break;
}
}
});
$('#dg').datagrid('loadData', rows);
}
$(function(){
$('#dg').datagrid('loadData',data);
});
</script>
</body>
</html>
From topic https://www.jeasyui.com/forum/index.php?topic=3420.0 (https://www.jeasyui.com/forum/index.php?topic=3420.0)
|