前端框架easyui的使用
2016-02-25 17:41
627 查看
Easyui框架如其名，使用起来非常简单，它是一组基于jQuery的UI插件集合体，只需要简单的几句js语句或者html语句，就可以写出蛮不错的商业风格UI。
首先在这个网站下载easyui的免费版本：http://www.jeasyui.com/download/index.php。
easyui由于非常简单，官网提供了一套tutorial，基本涵盖了平时所需要用到的一切组件、用法，其它中文教程很多都是照搬了这里，也因为这些例子很好理解、清晰易懂。
网址：http://www.jeasyui.com/tutorial/index.php
其中DataGrid这个组件尤为重要，建议先学习这个组件。
先建一个数据库，5个字段，id,name ,age,sex,major，然后就是index.html文件，
首先，是得到数据库的数据进行展示，着重看这段代码
<table id="dg" title="My Users" class="easyui-datagrid" style="width:700px;height:500px"
url="get_users.php"
toolbar="#toolbar" pagination="true"
rownumbers="true" fitColumns="true" singleSelect="true">
<thead>
<tr>
<th field="name" width="50">Name</th>
<th field="age" width="50">Age</th>
<th field="sex" width="50">Sex</th>
<th field="major" width="50">Major</th>
</tr>
</thead>
</table>get_users.php是用来获取数据库的json数据的，格式为一个total指定有多少条数据，一个rows指定数据，如下：
<?php
$page = isset($_POST['page']) ? intval($_POST['page']) : 1;
$rows = isset($_POST['rows']) ? intval($_POST['rows']) : 10;
$offset = ($page-1)*$rows;
$result = array();
include 'conn.php';
$rs = mysql_query("select count(*) from students");
$row = mysql_fetch_row($rs);
$result["total"] = $row[0];
$rs = mysql_query("select * from students limit $offset,$rows");
$items = array();
while($row = mysql_fetch_object($rs)){
array_push($items, $row);
}
$result["rows"] = $items;
echo json_encode($result);
?>至于增删改查，原理和这个一样，这里用增加做个示范。
关注这段代码，这个是增删改查的按钮栏：
<div id="toolbar">
<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">New User</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">Edit User</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="removeUser()">Remove User</a>
</div>
其中New User就是增加按钮，它会触发newUser这个js方法，然后看下js方法：
var url;
function newUser(){
$('#dlg').dialog('open').dialog('setTitle','New User');
$('#fm').form('clear');
url = 'save_user.php';
}
也就是弹出对话框，点击保存之后，请求save_user.php这个文件进行保存。
function saveUser(){
$('#fm').form('submit',{
url: url,
onSubmit: function(){
},
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
});
}
}
});
}
save_user.php如下：
<?php
$name = $_REQUEST['name'];
$age = $_REQUEST['age'];
$sex = $_REQUEST['sex'];
$major = $_REQUEST['major'];
include 'conn.php';
$sql = "insert into students(name,age,sex,major) values('$name','$age','$sex','$major')";
$result = @mysql_query($sql);
if ($result){
echo json_encode(array('success'=>true));
} else {
echo json_encode(array('msg'=>'Some errors occured.'));
}
?>首先是接收数据，然后进行保存，然后刷新。数据就保存后显示出来了。
同时大家也可以尝试springmvc+spring+mybatis+easyui、struts2+spring+hibernate+easyui，原理是相同的。
首先在这个网站下载easyui的免费版本：http://www.jeasyui.com/download/index.php。
easyui由于非常简单，官网提供了一套tutorial，基本涵盖了平时所需要用到的一切组件、用法，其它中文教程很多都是照搬了这里，也因为这些例子很好理解、清晰易懂。
网址：http://www.jeasyui.com/tutorial/index.php
其中DataGrid这个组件尤为重要，建议先学习这个组件。
这里以PHP给出几个例子。
先建一个数据库，5个字段，id,name ,age,sex,major，然后就是index.html文件，<!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="jquery,ui,easy,easyui,web">
<meta name="description" content="easyui help you build your web page easily!">
<title>jQuery EasyUI CRUD Demo</title>
<link rel="stylesheet" type="text/css" href="http://www.w3cschool.cc/try/jeasyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.w3cschool.cc/try/jeasyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="http://www.w3cschool.cc/try/jeasyui/demo/demo.css">
<style type="text/css">
#fm{
margin:0;
padding:10px 30px;
}
.ftitle{
font-size:14px;
font-weight:bold;
color:#666;
padding:5px 0;
margin-bottom:10px;
border-bottom:1px solid #ccc;
}
.fitem{
margin-bottom:5px;
}
.fitem label{
display:inline-block;
width:80px;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script type="text/javascript" src="http://www.w3cschool.cc/try/jeasyui/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(){
},
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
4000
});
}
}
});
}
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('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>
<h2>Basic CRUD Application</h2>
<div class="demo-info" style="margin-bottom:10px">
<div class="demo-tip icon-tip"> </div>
<div>Click the buttons on datagrid toolbar to do crud actions.</div>
</div>
<table id="dg" title="My Users" class="easyui-datagrid" style="width:700px;height:500px"
url="get_users.php"
toolbar="#toolbar" pagination="true"
rownumbers="true" fitColumns="true" singleSelect="true">
<thead>
<tr>
<th field="name" width="50">Name</th>
<th field="age" width="50">Age</th>
<th field="sex" width="50">Sex</th>
<th field="major" width="50">Major</th>
</tr>
</thead>
</table>
<div id="toolbar">
<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">New User</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">Edit User</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="removeUser()">Remove User</a>
</div>
<div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"
closed="true" buttons="#dlg-buttons">
<div class="ftitle">User Information</div>
<form id="fm" method="post" novalidate>
<div class="fitem">
<label>Name:</label>
<input name="name" class="easyui-validatebox" required="true">
</div>
<div class="fitem">
<label>Age:</label>
<input name="age" class="easyui-validatebox" required="true">
</div>
<div class="fitem">
<label>Sex:</label>
<input name="sex">
</div>
<div class="fitem">
<label>Major:</label>
<input name="major" class="easyui-validatebox" >
</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>首先，是得到数据库的数据进行展示，着重看这段代码
<table id="dg" title="My Users" class="easyui-datagrid" style="width:700px;height:500px"
url="get_users.php"
toolbar="#toolbar" pagination="true"
rownumbers="true" fitColumns="true" singleSelect="true">
<thead>
<tr>
<th field="name" width="50">Name</th>
<th field="age" width="50">Age</th>
<th field="sex" width="50">Sex</th>
<th field="major" width="50">Major</th>
</tr>
</thead>
</table>get_users.php是用来获取数据库的json数据的，格式为一个total指定有多少条数据，一个rows指定数据，如下：
<?php
$page = isset($_POST['page']) ? intval($_POST['page']) : 1;
$rows = isset($_POST['rows']) ? intval($_POST['rows']) : 10;
$offset = ($page-1)*$rows;
$result = array();
include 'conn.php';
$rs = mysql_query("select count(*) from students");
$row = mysql_fetch_row($rs);
$result["total"] = $row[0];
$rs = mysql_query("select * from students limit $offset,$rows");
$items = array();
while($row = mysql_fetch_object($rs)){
array_push($items, $row);
}
$result["rows"] = $items;
echo json_encode($result);
?>至于增删改查，原理和这个一样，这里用增加做个示范。
关注这段代码，这个是增删改查的按钮栏：
<div id="toolbar">
<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">New User</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">Edit User</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="removeUser()">Remove User</a>
</div>
其中New User就是增加按钮，它会触发newUser这个js方法，然后看下js方法：
var url;
function newUser(){
$('#dlg').dialog('open').dialog('setTitle','New User');
$('#fm').form('clear');
url = 'save_user.php';
}
也就是弹出对话框，点击保存之后，请求save_user.php这个文件进行保存。
function saveUser(){
$('#fm').form('submit',{
url: url,
onSubmit: function(){
},
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
});
}
}
});
}
save_user.php如下：
<?php
$name = $_REQUEST['name'];
$age = $_REQUEST['age'];
$sex = $_REQUEST['sex'];
$major = $_REQUEST['major'];
include 'conn.php';
$sql = "insert into students(name,age,sex,major) values('$name','$age','$sex','$major')";
$result = @mysql_query($sql);
if ($result){
echo json_encode(array('success'=>true));
} else {
echo json_encode(array('msg'=>'Some errors occured.'));
}
?>首先是接收数据，然后进行保存，然后刷新。数据就保存后显示出来了。
同时大家也可以尝试springmvc+spring+mybatis+easyui、struts2+spring+hibernate+easyui，原理是相同的。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- UITextField，UITextView回收键盘
- GPUimage 简单使用（-）单个滤镜使用
- 【Hibernate】query查询不报错卡住不动不往下执行的解决办法
- 笔记之-uevent机制
- POJ 3601-Subsequence【尺取法】
- UILabel的一些用法
- uiautomator中一些常用的方法
- UI基本三控件
- UVA 10401 Injured Queen Problem
- UITableView属性及方法大全
- UIModalPresentationStyle和UIModalTransitionStyle
- UI控件学习
- 【SPOJ-GSS1】Can you answer these queries I【线段树】【最大子段和】
- 自定义UITableView的右侧索引
- Pavilion M4-1016TX 加装固态硬盘（SSD）+UEFI+GPT安装WIN8.1
- 在iOS 8中使用UIAlertController
- QT项目负责人必须掌握的Ui设计师功能——Promote to !
- UIView
- iOS 8 模糊视图(毛玻璃效果)的简单实现UIVisualEffectView
- mui学习笔记