Is it possible to have a customize datagrid filter row?

I have DATE column in my datagrid and when user enter number like 5.. only dates with 5 years difference from the date today will show.

Is it possible? Thanks.

Hi! I followed the code base in this tutorial:
http://www.jeasyui.com/tutorial/datagrid/datagrid7.php

But when i applied it in my datagrid, it shows empty data.. All data are not loaded.. Why?


Here's my code:


HTML

Code:

					
							<th field="osidate" sortable="true" auto="true" editor="text">OS Installed Date</th>
							<th field="bdate" sortable="true" auto="true" editor="text" >BIOS Date</th>
							<th field="pdate" sortable="true" auto="true" editor="text"  formatter="formatdate"  >Purchase Date</th>
							<th field="process" sortable="true" auto="true" editor="text">Processor</th>
							<th field="mobo" sortable="true" auto="true" editor="text">Motherboard</th>
							<th field="memory" sortable="true" auto="true" editor="text">Memory Card</th>
							<th field="drive" sortable="true" auto="true" editor="text">Hard Drive</th>
							<th field="ups" sortable="true" auto="true" editor="text">UPS</th>

JScipt

Code:

     function formatdate(val,row){
		var newval = val.slice(-4);
		var d = new Date();
		var n = d.getFullYear();
	
		var finalval = n - newval;
		
			if (finalval >= 5 ){
				return '<span style="color:red;">'+val+'</span>';
			} else {
				return val;
			}
		}
		

Hi! Can anyone help me with my datagrid..Please!

All are functioning properly except my Save button... Whenever I create new user or edit user information then I clicked SAVE button it doesn't save.. It seems that the error is in part of saveuser() function in my script, but I don't how to debug it.. Please help me.

Here is my Script:

               

Code:

<script type="text/javascript">
			$(function(){
			$('#dg').datagrid({
			pageSize:25,
			pageList:[25,50,75,100]
			});
		});
		
		var url;
		function newUser(){
			$('#dlg').dialog('open').dialog('setTitle','New Computer Information');
			$('#fm').form('clear');
			url = 'dissave.php';
			obj1 = document.getElementById('exportword');
			obj1.style.visibility = 'hidden';
			obj2 = document.getElementById('exportexcel'); 
			obj2.style.visibility = 'hidden';
			obj3 = document.getElementById('printdoc'); 
			obj3.style.visibility = 'hidden';
		}
		function editUser(){
			var row = $('#dg').datagrid('getSelected');
			if (row){
				$('#dlg').dialog('open').dialog('setTitle','Edit Computer Information');
				$('#fm').form('load',row);
				url = 'disupdate.php?id='+row.id;
			}
			obj1 = document.getElementById('exportword');
			obj1.style.visibility = 'visible';
			obj2 = document.getElementById('exportexcel'); 
			obj2.style.visibility = 'visible';
			obj3 = document.getElementById('printdoc'); 
			obj3.style.visibility = 'visible';
		}
		function saveUser(){
			$('#fm').form('submit',{
				url: url,
				onSubmit: function(){
					return $(this).form('validate');
				},
				success: function(result){
					var result = eval('('+result+')');
					if (result.success){
						
						$('#dlg').dialog('close');		// close the dialog
						$('#dg').datagrid('reload');	// reload the user data
					} else {
					
						$.messager.show({
							title: 'Error',
							msg: result.msg
						});
					}
				}
			});
		}
		function removeUser(){
			var row = $('#dg').datagrid('getSelected');
			if (row){
				$.messager.confirm('Confirm','Are you sure you want to remove this user?',function(r){
					if (r){
						$.post('disremove.php',{id:row.id},function(result){
							if (result.success){
								$('#dg').datagrid('reload');	// reload the user data
							} else {
								$.messager.show({	// show error message
									title: 'Error',
									msg: result.msg
								});
							}
						},'json');
					}
				});
			}
		}
		function doSearch(){
		 if (window.event.keyCode == 13){
			$('#dg').datagrid('load',{
				search1: $('#search1').val(),
				
			});
			
			 }
		}
		function doSearch1(){
		
			$('#dg').datagrid('load',{
				search1: $('#search1').val(),
				
			});
			
			 
		}
		
		
		
		
		
		function logout(){
			var conlog = confirm("Are you sure you wish to logout?");
			if (conlog){
				return true;
			}
			else{
				return false;
			}
		}
		
		
		
		
	   </script>

Here is my datagrid html code with edit form:

         

Code:

<div id='middle'>
		<table border='0' align='center' style="border-collapse:collapse" >
			<tr height='30px'>
				<td></td>
			</tr>
			<tr>
				<td>
				<!-- datagrid-->
					<table id="dg" class="easyui-datagrid" style="width:1100px;height:740px"
							url="disget.php" 
							toolbar="#toolbar" pagination="true"
							rownumbers="true" fitColumns="false" singleSelect="true" nowrap="true">
					<thead>
						<tr>
							
							<th field="item" auto="true" sortable='true' editor="{type:'validatebox',options:{required:true}}">Item Name</th>
							<th field="brand" sortable="true" auto="true" editor="{type:'validatebox',options:{required:true}}">Brand Name</th>
							<th field="model" sortable="true" auto="true" editor="text">Model Name</th>
							<th field="color" sortable="true" auto="true" editor="text">Color</th>
							<th field="desc" sortable="true" auto="true" editor="text">Item Description</th>
							<th field="serial" sortable="true" auto="true" editor="text">Serial No.</th>
				
							<th field="date" sortable="true" auto="true" editor="text">Date Given</th>
							<th field="dept" sortable="true" auto="true" editor="text">Department</th>
							<th field="status" sortable="true" auto="true" editor="text">Status</th>
							<th field="others" sortable="true" auto="true" editor="text">Others/Problems</th>
							<th field="history" sortable="true" auto="true" editor="text">Item History</th>
						</tr>
					</thead>
				</table>
				<div id="toolbar">
					<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">New Item Information</a>
					<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">Edit/Print Item Information</a>
					<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="removeUser()">Delete</a>
					<a href="#" class="easyui-linkbutton" iconCls="icon-print2" plain="true" onclick="printsample()">Print</a>
					<input id="search1" style="line-height:26px;border:1px solid #ccc" hidden='true'>
					
					
			
				</div>
	
				<div id="dlg" class="easyui-dialog" style="width:680px;height:700px; background:#f1f1f1"
						closed="true" buttons="#dlg-buttons">
						
				<!-- FORM -->
				
					<form id="fm" method="post" novalidate>
					<div class="fitem"><br>
					<table border='0' align='center' style='font-size:12px;
						font-weight:bold;' cellpadding='10px'>
						<tr>
							<td>Item Name<br><input style='padding-left: 10px;height: 30px;width: 267px;' name="item" class="easyui-validatebox" required="false"></td><td>
							<br><input style='height: 30px;width: 20px;'  name="id" id="computerid" hidden='true'>
							</td><td>Date Given<br><input style='padding-left: 10px;height: 30px;width: 267px;'  name="date"></td>
						</tr>
						<tr>
							<td colspan='2'>Brand Name<br><input style='padding-left: 10px;height: 30px;width: 267px;'  name="brand"></td>
							<td>Model Name<br><input style='padding-left: 10px;height: 30px;width: 267px;'  name="model"></td>
						</tr>
						<tr>
							<td colspan='2'>Color<br><input style='padding-left: 10px;height: 30px;width: 267px;'  name="color"></td>
							<td>Serial No.<br><input style='padding-left: 10px;height: 30px;width: 267px;'  name="serial"></td>
						</tr>
						<tr>
							<td>Department<br>
							
					
							<select style='padding-left: 10px;height: 30px;width: 267px;' name='dept'>
							<option value="MIS">Management Information System</option>
							<option value="Crew">Personal Injury</option>
							<option value="Marine">Marine Claims</option>
							<option value="Billing">Billing</option>
							<option value="Treasury">Treasury</option>
							<option value="HRD">Human Resources</option>
							<option value="OP">Office of the President</option>
							<option value="OEVP">Office of the Executive Vice President</option>
							<option value="Accounting">Accounting</option>
							<option value="Endorsement">Endorsement</option>
							<option value="Medical">Medical</option>
							</select>	
							
							</td></td><td>
							<td>Status<br><input style='padding-left: 10px;height: 30px;width: 267px;'  name="status"></td>
						</tr>
						<tr>
							<td colspan='2' valign='top'>Item Description<br><textarea rows="6" cols="31" name='desc' ></textarea></td>
							<td valign='top'>Others/Problems<br><textarea rows="6" cols="31" name='others' placeholder='*include date'></textarea></td>
						</tr>
						<tr>
							
							<td colspan='3' valign='top'>Item History<br><textarea rows="6" cols="70" name='history' placeholder='*include date'></textarea></td>
						</tr>
						
					</table>
					</div>
					
					
						
					</form>
				</div>
				<div id="dlg-buttons">
					<a href="#" class="easyui-linkbutton" id ="exportword" iconCls="icon-word" onclick="doExportword()">Word</a>
					<a href="#" class="easyui-linkbutton" id ="exportexcel" iconCls="icon-excel" onclick="doExportexcel()">Excel</a>
					<a href="#" class="easyui-linkbutton" id ="printdoc" iconCls="icon-print" onclick="doPrint()">Print</a>
					<a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUser()">Save</a>
					<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">Cancel</a>
				</div>
					<!-- datagrid-->
				</td>
			</tr>
			<tr height='30px'>
				<td></td>
			</tr>
		</table>
	</div>

is console.log is another way of alert function or it's different? where i could find the result of console.log?

I have created a grid panel.It has no. of records. I want to get all data in the grid when click a button.This function is working, if select entire row using datagrid('getSelections');

is possible get entire data in the grid without select the rows? and is it possible get the value of first column only for each row?

Here is my link button, how I can hide PRINT link when user click NewUser button.

Code:

                <div id="dlg-buttons">
			<a href="#" class="easyui-linkbutton" id ="printdoc" iconCls="icon-ok" onclick="doPrint()">Print</a>
			<a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUser()">Save</a>
			<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">Cancel</a>
		</div>

Here my jquery code for new user and edit user.

Code:

                    function newUser(){

			$('#dlg').dialog('open').dialog('setTitle','New Computer Information');
			$('#fm').form('clear');
			url = 'save_user.php';
			
			$(function(){
				$('#dlg-buttons').$('#printdoc').hide();
				});
			}



                       function editUser(){

			    var row = $('#dg').datagrid('getSelected');
			     if (row){
				$('#dlg').dialog('open').dialog('setTitle','Edit Computer Information');
				$('#fm').form('load',row);
				url = 'update_user.php?id='+row.id;
			}
		}

		

Thanks!!

Sorry if my question is not clear, but i've already done the search function run properly. when i enter the keyword and clicked the search button,  datagrid will load all data depending to the inputted keyword.

What I want is how can i get all rows in the datagrid....

I've added the search function in my datagrid. Is there a way I can get all rows in datagrid after i clicked the search button.


Please help!

how can I trigger search using Enter Key? If I enter the keyword then press enter key it will do the search function?? 

It worked.. Thanks.

In pagination dropdown list, how can i delete 10 and change the default to 20 or 30 or 40 so it will display 20 rows or 30 rows when datagrid is load..

http://www.jeasyui.com/tutorial/datagrid/datagrid24.php

Thanks in advance!

how can I use it and connect to my datagrid?

how about export it in pdf or excel?

Is it possible to print the data inside the datagrid and print the pop up edit form from this tutorial?
http://www.jeasyui.com/tutorial/app/crud.php

Follow up question, is it possible to print the the data in the datagrid and print the data using the pop up edit form that the link you gave me?.. thanks.