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:
<!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
<!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.
