【jQuery EasyUI系列】创建CRUD数据网格
在上一篇中我们使用对话框组件创建了CRUD应用创建和编辑用户信息。本篇我们来创建一个CRUD数据网格DataGrid
步骤1,在HTML标签中定义数据网格(DataGrid)
<table id="dg" title="My Users" style="width:550px;height:250px"
toolbar="#toolbar" idField="id"
rownumbers="true" fitColumns="true" singleSelect="true">
<thead>
<tr>
<th field="firstname" width="50" editor="{type:'validatebox',options:{required:true}}">First Name</th>
<th field="lastname" width="50" editor="{type:'validatebox',options:{required:true}}">Last Name</th>
<th field="phone" width="50" editor="text">Phone</th>
<th field="email" width="50" editor="{type:'validatebox',options:{validType:'email'}}">Email</th>
</tr>
</thead>
</table>
<div id="toolbar">
<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="javascript:$('#dg').edatagrid('addRow')">New</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="javascript:$('#dg').edatagrid('destroyRow')">Destroy</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="javascript:$('#dg').edatagrid('saveRow')">Save</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-undo" plain="true" onclick="javascript:$('#dg').edatagrid('cancelRow')">Cancel</a>
</div>
步骤2、使用可编辑的数据网格(DataGrid)
$('#dg').edatagrid({
url: 'get_users.php',
saveUrl: 'save_user.php',
updateUrl: 'update_user.php',
destroyUrl: 'destroy_user.php'
});
我们应该提供 url saveUrl updateUrl destoryUrl属性来编辑数据网格DataGrid
url:从服务器检索用户数据
saveUrl:保存一个新的用户数据
updateUrl:更新一个已存在的用户数据
destroyUrl:删除一个已存在的用户数据
步骤3、写服务器处理代码
保存一个新的用户 save_user.php
$firstname = $_REQUEST['firstname'];
$lastname = $_REQUEST['lastname'];
$phone = $_REQUEST['phone'];
$email = $_REQUEST['email']; include 'conn.php'; $sql = "insert into users(firstname,lastname,phone,email) values('$firstname','$lastname','$phone','$email')";
@mysql_query($sql);
echo json_encode(array(
'id' => mysql_insert_id(),
'firstname' => $firstname,
'lastname' => $lastname,
'phone' => $phone,
'email' => $email
));
更新一个已存在用户update_user.php:
$id = intval($_REQUEST['id']);
$firstname = $_REQUEST['firstname'];
$lastname = $_REQUEST['lastname'];
$phone = $_REQUEST['phone'];
$email = $_REQUEST['email']; include 'conn.php'; $sql="update users set firstname='$firstname',lastname='$lastname',phone='$phone',email='$email' where id=$id";
@mysql_query($sql);
echo json_encode(array(
'id' => $id,
'firstname' => $firstname,
'lastname' => $lastname,
'phone' => $phone,
'email' => $email
));
删除一个已存在用户destroy_user.php
$id = intval($_REQUEST['id']); include 'conn.php'; $sql = "delete from users where id=$id";
@mysql_query($sql);
echo json_encode(array('success'=>true));
【jQuery EasyUI系列】创建CRUD数据网格的更多相关文章
- jQuery EasyUI 应用 – 创建 CRUD 应用(表格)
jQuery EasyUI 应用 - 创建 CRUD 应用 本节介绍如何创建CRUD应用. CRUD分别是指在做计算处理时的增加(Create).读取查询(Retrieve).更新(Update)和删 ...
- [jQuery EasyUI系列] 创建增删改查应用
一.数据收集并妥善管理数据是网络应用共同的必要.CRUD允许我们生产页面列表并编辑数据库记录. 本文主要演示如何使用jQuery EasyUI实现CRUD DataGrid. 将使用到的插件有: da ...
- 使用Struts2和jQuery EasyUI实现简单CRUD系统(转载汇总)
使用Struts2和jQuery EasyUI实现简单CRUD系统(一)——从零开始,ajax与Servlet的交互 使用Struts2和jQuery EasyUI实现简单CRUD系统(二)——aja ...
- JQuery Easyui/TopJUI 创建多级联动下拉框(纯HTML实现!!!)
JQuery Easyui/TopJUI 创建多级联动下拉框(纯HTML实现!!!) 效果展示: 代码如下: <form data-toggle="topjui-form"& ...
- 雷林鹏分享:jQuery EasyUI 窗口 - 创建简单窗口
jQuery EasyUI 窗口 - 创建简单窗口 创建一个窗口(window)非常简单,我们创建一个 DIV 标记: Some Content. 现在运行测试页面,您会看见一个窗口(window)显 ...
- jQuery EasyUI/TopJUI创建文本验证框(不写js,纯HTML实现!!!)
jQuery EasyUI/TopJUI创建文本验证框(不写js,纯HTML实现!!!) validatebox(验证框)的设计目的是为了验证输入的表单字段是否有效.如果用户输入了无效的值,它将会更改 ...
- jQuery EasyUI/TopJUI创建树形表格下拉框
jQuery EasyUI/TopJUI创建树形表格下拉框 第一种方法(纯HTML创建) <div class="topjui-row"> <div class= ...
- 【jQuery EasyUI系列】 创建展开行明细编辑表单的CRUD应用
当切换数据网络格局(datagrid view)到detailview,用户可以展开一行来显示一些行的明细在行下面,这个功能允许您为防止在明细行面板中的编辑表单提供一些合适的布局. 步骤1.在HTML ...
- 使用Struts2和jQuery EasyUI实现简单CRUD系统(五)——jsp,json,EasyUI的结合
这部分比較复杂,之前看过自己的同学开发一个选课系统的时候用到了JSON,可是一直不知道有什么用.写东西也没用到.所以没去学他.然后如今以这样的怀着好奇心,这是做什么用的,这是怎么用的.这是怎么结合的心 ...
随机推荐
- JQuery中的extend函数
1.jQuery.fn.extend(object) 扩展 jQuery 元素集来提供新的方法(通常用来制作插件). 例如:增加两个插件方法. jQuery.fn.extend({ check: fu ...
- Javascript为元素添加事件处理函数
document.getElementById("test").onclick = function(){ ... };
- Android界面隐藏软键盘的探索(兼findViewById返回null解决办法)
最近写的APP,老师说我的登陆界面虽然有ScrollView滑动,但用户体验不太好,因为软键盘会挡住输入框或登录button(小米Pad,横屏,当指定只能输入数字时没找到关闭系统自带键盘的下箭头). ...
- hdu 2586 How far away
How far away ? Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) T ...
- rownum和sum一起使用经验
因为sum的使用需要group by的,所以,对于sum出来的东西想要排序,使用rownum的话,不能直接放在SQL里面的. 可以这样. select rownum,R.* ( select sum( ...
- Android中如何设置RadioButton在文字的右边,图标在左边
from:http://blog.csdn.net/sunnyfans/article/details/7901592?utm_source=tuicool&utm_medium=referr ...
- Mysql的二进制日志binlog的模式说明
binlog模式总共可分为以下三种:row,statement,mixed 1.Row日志中会记录成每一行数据被修改的形式,然后在slave端再对相同的数据进行修改,只记录要修改的数据,只有value ...
- 十个节省时间的MySQL命令
十个节省时间的MySQL命令 2011-02-23 16:07 黄永兵 译 IT168 字号:T | T 编者在工作中积累起来了一些MySQL命令行客户端技巧,这些技巧或多或少会帮助您节省大量的时间. ...
- Java 集合系列07之 Stack详细介绍(源码解析)和使用示例
概要 学完Vector了之后,接下来我们开始学习Stack.Stack很简单,它继承于Vector.学习方式还是和之前一样,先对Stack有个整体认识,然后再学习它的源码:最后再通过实例来学会使用它. ...
- JS 中如何判断 undefined 和 null
JS 中如何判断 undefined JavaScript 中有两个特殊数据类型:undefined 和 null,下节介绍了 null 的判断,下面谈谈 undefined 的判断. 以下是不正确的 ...