Latest posts of: swells808

EasyUI Forum

May 14, 2024, 02:06:53 PM

Welcome, Guest. Please login or register.

News:

Home

Help

Show Posts
Pages: [1]

1	General Category / EasyUI for jQuery / Pulling data from multiple tables in the same database	on: January 11, 2015, 09:33:20 PM
Using the CRUD demo as an example I was wondering how to pull data from multiple tables inside the same database. Here is my example: There are 2 databases "users" and "data". The CRUD table pulls the following fields from users - first name, last name, hire date. Then pulls the following from data - department, manager, division. What I need is when a user creates a new entry is they fill in the first name, last name, department, manager, and division fields with hire date auto populating. The 2 issues I have are: how do I script the get_users.php to connect to 2 sources (and of course script this into the CRUD) and how do I ensure the hire date field auto populates. Thanks in advance.

2	General Category / EasyUI for jQuery / Re: Auto Sort not working	on: November 10, 2014, 12:54:08 PM
Thank you that moved it!

General Category / EasyUI for jQuery / Auto Sort not working

on: November 08, 2014, 08:34:23 AM

Hello all. I was able to turn sorting on my columns so I can manually click on the headers to order things but I am having an issue making it happen manually. I am trying to set my grid so it sorts the shift column ascending then the date column after that.

My first try was to add the following code to the get users php file:

Code:

$page = isset($_POST['page']) ? intval($_POST['page']) : 1;
	$rows = isset($_POST['rows']) ? intval($_POST['rows']) : 20;
	$sort = isset($_POST['sort']) ? strval($_POST['sort']) : 'shift';
	$order = isset($_POST['order']) ? strval($_POST['order']) : 'asc';
	$offset = ($page-1)*$rows;

Then I went into the html and added this:

Code:

<body bgcolor="#3d3d3d">
	<table id="dg" title="Flight Assignment" class="easyui-datagrid" style="width:1000px;height:650px"
			url="get_users.php"
			toolbar="#toolbar"
			data-options="
			pagination:true,
			pageSize:20,
			rownumbers:true, 
			fitColumns:true, 
			singleSelect:true,
			remoteSort:true,			 
			multiSort:true,
                ">
		<thead>
			<tr>
				<th data-options="field:'shift',width:50,sortable:true">SHIFT</th>
				<th data-options="field:'date',width:80,sortable:true">DATE</th>

This allowed me a sheet that worked but, I had to manually sort. My next step was to add

Code:

sortName:shift,
sortOrder:asc,

in the data-options area but that broke the page. I even tried changing remoteSort:true but, that didn't help either. What am I missing? Thanks.

4	General Category / EasyUI for jQuery / Possible to have more than one value in groupField for the groupview function?	on: October 08, 2014, 05:33:47 PM
I am using the group view in a data grid and I wanted to link more than one value in the groupField area. Is this possible and if so how do I do this? Code: view:groupview, groupField:'shift', groupFormatter:function(value,rows){ return 'Shift ' + value + ' - ' + rows.length + ' Item(s)'; }

5	General Category / EasyUI for jQuery / Re: Is there a Cell styler function?	on: October 08, 2014, 02:05:27 PM
Yes and you've all been so helpful thanks. The final formula that is working perfect in case anyone needs it is Code: styler:function cellStyler(value,row,index){ var v = parseInt(row.nxtsvc); if (v > 5 && v <= 10){ return 'background-color:yellow;color:red;'; } else if (v > 10){ return 'background-color:red;color:yellow;' } else { //... } }

6	General Category / EasyUI for jQuery / Re: Does formatter:function cancel out styler:function?	on: October 07, 2014, 07:06:01 PM
Close! The math function works and the first if statement works but it ignores the "else if" part of the code. What is missing?

General Category / EasyUI for jQuery / Does formatter:function cancel out styler:function?

on: October 07, 2014, 03:21:30 PM

I have one column of my data grid that needs to do 2 different things
1. I need to subtract the entries from 2 different columns to return the result to this column (col a - col b = col c)
2. I need to set conditional styling for this column so if the result is >10 its turns yellow but if its >5 it turns red.

So here is the code I added to my grid, the problem I am having is the math result comes through correctly but the cell styler is ignored entirely (prior to the math function the styler would ignore the else statement). It seems like I can only call for one function to be completed which can't be right can it? Here is my code:

Code:

<table id="dg" title="Maintenance Log" class="easyui-datagrid" style="width:1000px;height:650px"
			url="get_users.php"
			toolbar="#toolbar"
			data-options="
			pagination:true,
			rownumbers:true, 
			fitColumns:true, 
			singleSelect:true,
			">
		<thead>
			<tr>
				<th data-options="field:'date',width:75">DATE</th>
				<th data-options="field:'acft',width:50">ACFT</th>
				<th data-options="field:'loc',width:40">LOC</th>
				<th data-options="field:'mttime',width:50">MTTIME</th>
				<th data-options="field:'nxtsvc',width:50">NXTSVC</th>
				<th data-options="field:'time',width:50,formatter:function(value,row){
			return row.nxtsvc - row.mttime;	//
		},
				styler:function cellStyler(value,row,index){
            if (value > 5 && value <= 10){
                return 'background-color:yellow;color:red;';
            } else if (value > 10){
            	return 'background-color:red;color:yellow;'
            }
        }
">TIME</th>
				<th data-options="field:'comments',width:100">COMMENTS</th>
			</tr>
		</thead>

8	General Category / EasyUI for jQuery / Re: Is there a Cell styler function?	on: October 02, 2014, 02:52:52 PM
Thank you for your help. The next step for me is how do I setup multiple conditions. So for example in a cell if the value is > yellow or > 5 turn red?

9	General Category / EasyUI for jQuery / Re: CRUD example vs Data grid example issues?	on: October 02, 2014, 02:00:09 PM
Thank you for the suggestion. But, this removes the sort by group (in this case cycle) that I had set up in the data grid example. Any suggestions?

General Category / EasyUI for jQuery / CRUD example vs Data grid example issues?

on: October 01, 2014, 07:26:11 PM

I am sorry I have ben asking some left field questions from this forum but, I think my biggest question stems from the examples. I started with the basic crud application example that pulls data with a php script from a mysql/json source. The example is written in mostly html with some javascript. But for the more specific examples like adding the styler functionality or organizing the grid I come across the issue of breaking my crud functionality. Why is that?

I will give you an example of before and after code. Here is my basic crud application that works fine but lacks some of the data grid enhancements:

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">
	<meta name="keywords" content="flight">
	<meta name="description" content="Flight Assingment data grid">
	<title>Flight Assignment</title>
	<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/black/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">
	<style type="text/css">
		#fm{
			margin:0;
			padding:10px 30px;
			font-size:18px;
		}
		.ftitle{
			font-size:32px;
			font-weight:bold;
			color:#666;
			padding:5px 0;
			margin-bottom:10px;
			border-bottom:1px solid #ccc;
		}
		.fitem{
			margin-bottom:5px;
			font-size:18px;
		}
		.fitem label{
			display:inline-block;
			width:80px;
			font-size:18px;
		}
	</style>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
	<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="http://www.jeasyui.com/easyui/datagrid-groupview.js"></script>
	<script type="text/javascript">
		var url;
		function newUser(){
			$('#dlg').dialog('open').dialog('setTitle','New User');
			$('#fm').form('clear');
			url = 'save_user.php';
		}
		function editUser(){
			var row = $('#dg').datagrid('getSelected');
			if (row){
				$('#dlg').dialog('open').dialog('setTitle','Edit User');
				$('#fm').form('load',row);
				url = 'update_user.php?id='+row.id;
			}
		}
		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 flight?',function(r){
					if (r){
						$.post('remove_user.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');
					}
				});
			}
		}
	</script>
</head>
<body bgcolor="#3d3d3d">
	<table id="dg" title="Flight Assignment" class="easyui-datagrid" style="width:925px;height:1100px"
			url="get_users.php"
			toolbar="#toolbar" pagination="true"
			rownumbers="true" fitColumns="true" singleSelect="true">
		<thead>
			<tr>
				<th field="date" width="60" sortable="true">Date</th>
				<th field="cycle" width="30">Cycle</th>
				<th field="pilot" width="50">Pilot</th>
				<th field="pstatus" width="50">Status</th>
				<th field="tfo" width="50">TFO</th>
				<th field="callsign" width="50">Call Sign</th>
				<th field="psgrs" width="50">PSGRS</th>
				<th field="acft" width="50">ACFT</th>
				<th field="dest" width="50">DEST</th>
				<th field="depart" width="50">Depart</th>
				<th field="arrive" width="50">Arrive</th>
			</tr>
		</thead>
	</table>
	<div id="toolbar">
		<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">New Flight</a>
		<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">Edit Flight</a>
		<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" plain="true" onclick="removeUser()">Remove Flight</a>
	</div>
	
	<div id="dlg" class="easyui-dialog" style="width:400px;height:525px;padding:10px 20px"
			closed="true" buttons="#dlg-buttons">
		<div class="ftitle">Flight Information</div>
		<form id="fm" method="post" novalidate>
			<div class="fitem">
				<label>Date:</label>
				<input name="date" class="easyui-validatebox" required="true">
			</div>
			<div class="fitem">
				<label>Cycle</label>
				<input name="cycle" class="easyui-validatebox" required="true">
			</div>
			<div class="fitem">
				<label>Pilot:</label>
				<input name="pilot" class="easyui-validatebox" required="true">
			</div>
			<div class="fitem">
				<label>Status:</label>
				<input name="pstatus" class="easyui-validatebox" required="true">
			</div>
			<div class="fitem">
				<label>TFO:</label>
				<input name="tfo" class="easyui-validatebox" required="true">
			</div>
			<div class="fitem">
				<label>Call Sign:</label>
				<input name="callsign" class="easyui-validatebox" required="true">
			</div>
			<div class="fitem">
				<label>PSGRS:</label>
				<input name="psgrs" class="easyui-validatebox" required="true">
			</div>
			<div class="fitem">
				<label>ACFT:</label>
				<input name="acft" class="easyui-validatebox" required="true">
			</div>
			<div class="fitem">
				<label>DEST:</label>
				<input name="dest" class="easyui-validatebox" required="true">
			</div>
			<div class="fitem">
				<label>Depart:</label>
				<input name="depart" class="easyui-validatebox" required="true">
			</div>
			<div class="fitem">
				<label>Arrive:</label>
				<input name="arrive" class="easyui-validatebox" required="true">
			</div>
		</form>
	</div>
	<div id="dlg-buttons">
		<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>
</body>
</html>

Now when i try to add styling and change some of the form tags to do so I get the look but my crud application buttons stop working

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">
	<meta name="keywords" content="flight">
	<meta name="description" content="Flight Assingment data grid">
	<title>Flight Assignment</title>
	<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/black/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">
	<style type="text/css">
		#fm{
			margin:0;
			padding:10px 30px;
			font-size:18px;
		}
		.ftitle{
			font-size:32px;
			font-weight:bold;
			color:#666;
			padding:5px 0;
			margin-bottom:10px;
			border-bottom:1px solid #ccc;
		}
		.fitem{
			margin-bottom:5px;
			font-size:18px;
		}
		.fitem label{
			display:inline-block;
			width:80px;
			font-size:18px;
		}
	</style>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
	<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
	<script type="text/javascript">
		var url;
		function newUser(){
			$('#dlg').dialog('open').dialog('setTitle','New User');
			$('#fm').form('clear');
			url = 'save_user.php';
		}
		function editUser(){
			var row = $('#dg').datagrid('getSelected');
			if (row){
				$('#dlg').dialog('open').dialog('setTitle','Edit User');
				$('#fm').form('load',row);
				url = 'update_user.php?id='+row.id;
			}
		}
		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 flight?',function(r){
					if (r){
						$.post('remove_user.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');
					}
				});
			}
			}
		}
	</script>
</head>
<body bgcolor="#3d3d3d">
	<table id="dg" title="Flight Assignment" class="easyui-datagrid" style="width:925px;height:1100px"
			url="get_users.php"
			toolbar="#toolbar"
			data-options="
			pagination:true,
			rownumbers:true, 
			fitColumns:true, 
			singleSelect:true,
			">
		<thead>
			<tr>
				<th data-options="field:'date',width:40">DATE</th>
				<th data-options="field:'cycle',width:20">CYCLE</th>
				<th data-options="field:'pilot',width:50">PILOT</th>
				<th data-options="field:'pstatus',width:25">STATUS</th>
				<th data-options="field:'tfo',width:50">TFO</th>
				<th data-options="field:'callsign',width:30">CALL SIGN</th>
				<th data-options="field:'psgrs',width:20">PSGRS</th>
				<th data-options="field:'acft',width:20">ACFT</th>
				<th data-options="field:'dest',width:25">DEST</th>
				<th data-options="field:'depart',width:25">DEPART</th>
				<th data-options="field:'arrive',width:25">ARRIVE</th>
			</tr>
		</thead>
	</table>
	<div id="toolbar">
		<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">New Flight</a>
		<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">Edit Flight</a>
		<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" plain="true" onclick="removeUser()">Remove Flight</a>
	</div>
	
	<div id="dlg" class="easyui-dialog" style="width:400px;height:500px;padding:10px 20px"
			closed="true" buttons="#dlg-buttons">
		<div class="ftitle">Flight Information</div>
		<form id="fm" method="post" novalidate>
			<div class="fitem">
				<label>Date:</label>
				<input name="date" class="easyui-validatebox" required="true">
			</div>
			<div class="fitem">
				<label>Cycle</label>
				<input name="cycle" class="easyui-validatebox" required="true">
			</div>
			<div class="fitem">
				<label>Pilot:</label>
				<input name="pilot" class="easyui-validatebox" required="true">
			</div>
			<div class="fitem">
				<label>Pilot Status:</label>
				<input name="pstatus" class="easyui-validatebox" required="true">
			</div>
			<div class="fitem">
				<label>TFO:</label>
				<input name="tfo" class="easyui-validatebox" required="true">
			</div>
			<div class="fitem">
				<label>Call Sign:</label>
				<input name="callsign" class="easyui-validatebox" required="true">
			</div>
			<div class="fitem">
				<label>PSGRS:</label>
				<input name="psgrs" class="easyui-validatebox" required="true">
			</div>
			<div class="fitem">
				<label>ACFT:</label>
				<input name="acft" class="easyui-validatebox" required="true">
			</div>
			<div class="fitem">
				<label>DEST:</label>
				<input name="dest" class="easyui-validatebox" required="true">
			</div>
			<div class="fitem">
				<label>Depart:</label>
				<input name="depart" class="easyui-validatebox" required="true">
			</div>
			<div class="fitem">
				<label>Arrive:</label>
				<input name="arrive" class="easyui-validatebox" required="true">
			</div>
		</form>
	</div>
	<div id="dlg-buttons">
		<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>
</body>
</html>

So what step am I missing. Thank you.

11	General Category / EasyUI for jQuery / use the current date as part of a math formula	on: September 29, 2014, 11:23:42 AM
I need to create a function where when a date is entered in a column and the amount of days from the current date is calculated. How would i do this?

12	General Category / EasyUI for jQuery / Re: Is there a Cell styler function?	on: September 28, 2014, 06:31:57 PM
Thank you thats very helpful. The only question I have from here is what if I want to apply this style to only a specific column?

13	General Category / EasyUI for jQuery / Is there a Cell styler function?	on: September 28, 2014, 05:23:33 PM
So I have figured out how to use row styler for an entire row but what if I want to color just a cell on conditional content? For example my columns are date, cycle, destination, depart, and arrive. I want to set the condition that if the date is greater than 09/01/2013 i only want the cell of the dates to appear green how do I do this without styling the entire row?

14	General Category / EasyUI for jQuery / Multiple CRUD apps to share data betwen tables in a db for basic calculations	on: September 14, 2014, 05:16:23 PM
I am stuck and need a suggestion. I am building a web app with 2 different crud tables to essentially track vehicle use. So on one page a driver will log his time used in a specific vehicle and on the other its a maintenance log of each vehicle. I have 2 tables in a database (one for each CRUD table so driver and maintenance). What I need to figure out is how to do a math formula based on usage of a vehicle from the driver's page that reports to the corresponding vehicle in the maintenance table. On the maintenance page I need the mechanics to be able to log when a vehicle has been inspected. The idea here is this will reset the amount of time until the mechanics need to take a vehicle out of use for scheduled maintenance. Any suggestions?

15	General Category / EasyUI for jQuery / Highlighting cells in a crud application	on: August 07, 2014, 12:01:39 PM
Hello I am building a data grid using the CRUD application tutorial and I have hit a point of confusion. I want to set a conditional argument that cells with a specific value (i.e. if the value =y then make the cell green) for one column and for another column I need it do a math formula with another column to return a color (i.e. Column A - Column B = >20 then make the cell yellow). When I tried this by adding the following code into my get.php file: $('#dg').datagrid({ columns:[[ {field:'listprice',title:'List Price', width:80, align:'right', styler: function(value,row,index){ if (value = y){ return 'background-color:#ffee00;color:red;'; // the function can return predefined css class and inline style // return {class:'c1',style:'color:red'} } } } ]] }); But it blanked out all the data shown. Where am I going wrong?

Pages: [1]