Title: Add search functionality in TreeGrid
Post by: motux on May 15, 2013, 02:51:00 PM
I would to add search functionality in TreeGrid. The problem is the query in php file and the definition of the variable into load treegrid in the fuction doSearch. Have any idea? Thanks a lot. Claudio Html file: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Rubrica Telefonica - AOUD</title>
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript">
function doSearch(){
$('#rt').treegrid('load',{
Nominativo: $('#Nominativo').val(),
Telefono: $('#Telefono').val()
});
}
</script>
</head>
<body>
<h2>Rubrica Telefonica</h2>
<div class="demo-info" style="margin-bottom:10px">
<div class="demo-tip icon-tip"> </div>
<div>Selezionare la struttura interessata.</div>
</div>
<div id="tb" style="padding:3px 0px 0px 300px">
<span>Nominativo:</span>
<input id="Nominativo" style="width:150px;line-height:20px;border:1px solid #ccc">
<span style="padding-left:65px;">Tel. o Cel.:</span>
<input id="Telefono" style="width:80px;line-height:20px;border:1px solid #ccc">
<a href="#" class="easyui-linkbutton" plain="true" onClick="doSearch()">Ricerca</a>
</div>
<table id="rt" title="Rubrica Telefonica" class="easyui-treegrid" style="width:980px;height:400px"
url="treegrid_getdata.php" toolbar="#tb"
rownumbers="true"
idField="id" treeField="NomeStruttura">
<thead>
<tr>
<th field="NomeStruttura" width="250">Struttura</th>
<th field="TitResp" width="90">Posizione</th>
<th field="Nominativo" width="200">Nominativo</th>
<th field="Telefono" width="80">Telefono</th>
<th field="Cellulare" width="80">Cellulare</th>
<th field="Mail" width="150">Mail</th>
</tr>
</thead>
</table>
</body>
</html> PHP file:
$id = isset($_POST['id']) ? strval($_POST['id']) : 0;
$Nominativo = isset($_POST['Nominativo']) ? mysql_real_escape_string($_POST['Nominativo']) : '';
$Cellulare = isset($_POST['Cellulare']) ? mysql_real_escape_string($_POST['Cellulare']) : '';
include 'conn.php';
$result = array();
$rs = mysql_query("select * from Rubrica where parentid=$id");
while($row = mysql_fetch_array($rs)){
$row['state'] = has_child($row['id']) ? 'closed' : 'open';
array_push($result, $row);
}
echo json_encode($result);
function has_child($id){
$rs = mysql_query("select count(*) from Rubrica where parentid=$id");
$row = mysql_fetch_array($rs);
return $row[0] > 0 ? true : false;
}
Title: Re: Add search functionality in TreeGrid
Post by: stworthy on May 16, 2013, 12:54:22 AM
Try the code below to do searching. $('#rt').treegrid({
queryParams:{
Nominativo: $('#Nominativo').val(),
Telefono: $('#Telefono').val()
}
});
Title: Re: Add search functionality in TreeGrid
Post by: motux on May 17, 2013, 01:30:14 AM
Thanks a lot. I would to add a searchbox but i don't pass variabile name and value. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Rubrica Telefonica - AOUD</title>
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript">
function doSearch(value,name){
alert('You input: ' + value+'('+name+')'); //WORKS
$('#rt').treegrid({
queryParams:{
Colonna: $("#mm").data-options("name").val(), //DON'T WORKS
Valore: $("#mm").data-options("value").val() //DON'T WORKS
}
});
}
</script>
</head>
<body>
<h2>Rubrica Telefonica</h2>
<div class="demo-info" style="margin-bottom:10px">
<div class="demo-tip icon-tip"> </div>
<div>Selezionare la struttura interessata.</div>
</div>
<div id="tb" style="padding:3px 0px 0px 35%">
<input class="easyui-searchbox" data-options="prompt:'Inserisci valore da ricercare',menu:'#mm',searcher:doSearch" style="width:300px"></input>
<div id="mm" style="width:120px">
<div data-options="name:'Nominativo',iconCls:'icon-ok'">Nominativo</div>
<div data-options="name:'Telefono'">Telefono</div>
<div data-options="name:'Cellulare'">Cellulare</div>
</div>
</div>
<div class="tabrubrica" style="width:95%; height:550px;">
<table id="rt" title="Rubrica Telefonica" class="easyui-treegrid" style="width:100%;"
url="treegrid_getdata.php" toolbar="#tb"
rownumbers="true" idField="id" treeField="NomeStruttura"
data-options="fitColumns:true, fit:true">
<thead>
<tr>
<th field="NomeStruttura" width="30">Struttura</th>
<th field="TitResp" width="10">Posizione</th>
<th field="Nominativo" width="25">Nominativo</th>
<th field="Telefono" width="10">Telefono</th>
<th field="Cellulare" width="10">Cellulare</th>
<th field="Mail" width="15">Mail</th>
</tr>
</thead>
</table>
</div>
</body>
</html>
|