jQuery EasyUI教程之datagrid应用-1
一、利用jQuery EasyUI的DataGrid创建CRUD应用
对网页应用程序来说,正确采集和管理数据通常很有必要,DataGrid的CRUD功能允许我们创建页面来列表显示和编辑数据库记录。本教程将教会你如何运用jQuery EasyUI框架来实现DataGrid的CRUD功能 。
我们会用到如下插件:
· datagrid: 列表显示数据。
· dialog: 增加或编辑单个用户信息。
· form: 用来提交表单数据。
· messager: 用来显示操作信息。
第一步:准备数据库
使用MySql数据库来保存用户信息,并创建数据库和“users”表。
第二步:创建DataGrid数据表格来显示用户信息
不需要编写任何javascript代码创建DataGrid数据表格。
- <table id="dg" title="My Users" class="easyui-datagrid" style="width:550px;height:250px"
- url="get_users.php"
- toolbar="#toolbar"
- rownumbers="true" fitColumns="true" singleSelect="true">
- <thead>
- <tr>
- <th field="firstname" width="50">First Name</th>
- <th field="lastname" width="50">Last Name</th>
- <th field="phone" width="50">Phone</th>
- <th field="email" width="50">Email</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="destroyUser()">Remove User</a>
- </div>
如下图所示,我们不需要写任何一行javascript代码:
DataGrid使用“url”属性来指定“get_users.php”,用来从服务器端接收数据。
get_users.php代码文件:
- $rs = mysql_query('select * from users');
- $result = array();
- while($row = mysql_fetch_object($rs)){
- array_push($result, $row);
- }
- echo json_encode($result);
第三步:创建表单对话框
增加或者编辑用户信息,我们使用同一对话框。
- <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">
- <div class="fitem">
- <label>First Name:</label>
- <input name="firstname" class="easyui-validatebox" required="true">
- </div>
- <div class="fitem">
- <label>Last Name:</label>
- <input name="lastname" class="easyui-validatebox" required="true">
- </div>
- <div class="fitem">
- <label>Phone:</label>
- <input name="phone">
- </div>
- <div class="fitem">
- <label>Email:</label>
- <input name="email" class="easyui-validatebox" validType="email">
- </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>
对话框的创建也不需要编写javascript代码。
第四步:实现增加和编辑用户功能
增加用户信息时,打开对话框,清除表单数据。
- function newUser(){
- $('#dlg').dialog('open').dialog('setTitle','New User');
- $('#fm').form('clear');
- url = 'save_user.php';
- }
编辑用户信息时,打开对话框,将选择的数据表格行数据装入表单。
- 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;
- }
“url”保存URL地址,当保存用户数据时,表单用它来提交(post)数据到服务器。
第五步:保存用户数据
使用如下代码来保存用户数据:
- function saveUser(){
- $('#fm').form('submit',{
- url: url,
- onSubmit: function(){
- return $(this).form('validate');
- },
- success: function(result){
- var result = eval('('+result+')');
- if (result.errorMsg){
- $.messager.show({
- title: 'Error',
- msg: result.errorMsg
- });
- } else {
- $('#dlg').dialog('close'); // close the dialog
- $('#dg').datagrid('reload'); // reload the user data
- }
- }
- });
- }
提交表单前,“onSubmit”函数被调用,此时可校验表单字段值。当表单字段值提交成功,关闭对话框和刷新数据表格数据。
第六步:删除用户
用如下代码来删除用户:
- function destroyUser(){
- var row = $('#dg').datagrid('getSelected');
- if (row){
- $.messager.confirm('Confirm','Are you sure you want to destroy this user?',function(r){
- if (r){
- $.post('destroy_user.php',{id:row.id},function(result){
- if (result.success){
- $('#dg').datagrid('reload'); // 刷新用户数据
- } else {
- $.messager.show({ // 显示错误信息
- title: 'Error',
- msg: result.errorMsg
- });
- }
- },'json');
- }
- });
- }
- }
删除一行数据时,会弹出一个confirm对话框来让我们选择确定是否真的删除数据行。当删除数据成功,调用“reload”方法刷新datagrid数据。
第七步:运行代码
在浏览器中运行代码,同时MySQL启动。
现在你了解了Query EasyUI框架的CRUD基本知识。
jQuery EasyUI教程之datagrid应用-1的更多相关文章
- jQuery EasyUI教程之datagrid应用(三)
今天继续之前的整理,上篇整理了datagrid的数据显示及其分页功能 获取数据库数据显示在datagrid中:jQuery EasyUI教程之datagrid应用(一) datagrid实现分页功能: ...
- jQuery EasyUI教程之datagrid应用(二)
上次写到了让数据库数据在网页datagrid显示,我们只是单纯的实现了显示,仔细看的话显示的信息并没有达到我们理想的效果,这里我们丰富一下: 上次显示的结果是这样的 点击查看上篇:jQuery Eas ...
- jQuery EasyUI教程之datagrid应用(一)
最近一段时间都在做人事系统的项目,主要用到了EasyUI,数据库操作,然后抽点时间整理一下EasyUI的内容. 这里我们就以一个简洁的电话簿软件为基础,具体地说一下datagrid应用吧 datagr ...
- jQuery EasyUI教程之datagrid应用
一.利用jQuery EasyUI的DataGrid创建CRUD应用 对网页应用程序来说,正确采集和管理数据通常很有必要,DataGrid的CRUD功能允许我们创建页面来列表显示和编辑数据库记录.本教 ...
- jQuery EasyUI教程之datagrid应用-2
二.DataGrid的扩展应用 上一份教程我们创建的一个CRUD应用是使用对话框组件来增加或编辑用户信息.本教程将教你如何创建一个CRUD 数据表格(datagrid). 为了让这些CRUD功能正常工 ...
- jQuery EasyUI API - Grid - DataGrid [原创汉化官方API]
最近在学习jQuery EasyUI,发现中文的文档好少,部分文档不错但它是鸟语的,为了大家也为了自己学习吧,汉化做一下笔记. 有没有说清楚的,或者翻译不正确的地方还请大家谅解指出.. 由于工作时间原 ...
- 【Jquery EasyUI + Servlet】DataGrid,url请求带中文出现乱码的解决方案
demo.jsp: <% String name = "乱码"; %> $(function(){ $('#dg').datagrid({ url: 'DemoServ ...
- 关于Jquery EasyUI中的DataGrid服务器端分页随记
一.关于DataGrid的分页和排序参数 对于分页参数不需要用户指定,程序在AJAX请求的时候会带上分页和排序需要的参数 每页显示条数:rows 当前页:page 排序字段:sort [multiS ...
- jQuery基础教程之is()方法和has() 方法
is()方法 —— 用于筛选 语法: jQueryObject.is( expr )返回值: is()函数的返回值为Boolean类型.true或者false.只要其中至少有一个元素符合给定的表达式就 ...
随机推荐
- C# 自定义文件格式并即时刷新注册表 非关闭explorer
转自:http://blog.csdn.net/zhangtirui/article/details/4309492 最近公司在做一个项目 用到关于自定义格式的文件,但在注册表图标更改后 文件图标 ...
- 基于NOPI的Execl模板转换类,直接将Execl模板转换对应的Entity
1.创建实体属性标记 public class CellAttribute : Attribute { /// <summary> /// /// </summary> /// ...
- Retrofit2使用初探
首先需要导入这样两个包 compile 'com.squareup.retrofit2:retrofit:2.0.0-beta4' compile 'com.squareup.retrofit2:co ...
- socket概述和字节序、地址转换函数
一.什么是socket socket可以看成是用户进程与内核网络协议栈的编程接口. socket不仅可以用于本机的进程间通信,还可以用于网络上不同主机的进程间通信. socket API是一层抽象的网 ...
- Shell基础知识和编程规范
一,Shell环境查看 1.1 查看系统Shell支持情况 [root@linux-node1 ~]# cat /etc/shells /bin/sh /bin/bash /sbin/nologin ...
- yield与send实现协程操作
yield与send实现协程操作 之前我们说过,在函数内部含有yield语句即称为生成器. 下面,我们来看看在函数内部含有yield语句达到的效果.首先,我们来看看以下代码: def foo(): w ...
- 转 CAS实现SSO单点登录原理
原文链接 http://m.blog.csdn.net/hxpjava1/article/details/74019017 CAS 简介 1. 1.1. What is CAS ? CAS ( ...
- 关于python调用zabbix api接口
因公司业务需要,引进了自动化运维,所用到的监控平台为zbbix3.2,最近正在学习python,计划使用python调用zabbix api接口去做些事情,如生成报表,我想最基本的是要取得zabbix ...
- lftp查看文件时间与登录服务查看文件时间相差8小时
第一步,校正VPS时区设置: rm -rf /etc/localtime ln -s /usr/share/zoneinfo/Asia/Shanghai /etc/localtime 第二步,修改FT ...
- python引用,浅拷贝,深拷贝
1.引用 传递的是引用,原始列表改变,被赋值列表会同样改变,因为他们指向的是同一个地址. alist = [1,2,3,["a","b"]] blist = a ...