Latest posts of: motux

EasyUI Forum

October 03, 2025, 04:53:23 PM

Welcome, Guest. Please login or register.

News:

Home

Help

Show Posts
Pages: [1]

General Category / EasyUI for jQuery / Re: Add search functionality in TreeGrid

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.

Code:

<!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">&nbsp;</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>

General Category / EasyUI for jQuery / Add search functionality in TreeGrid

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:

Code:

<!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">&nbsp;</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:

Code:


$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;
}

Pages: [1]