雷林鹏分享:jQuery EasyUI 应用 - 创建 CRUD 数据网格(DataGrid)

  在上一章节中,我们使用对话框(dialog)组件创建了 CRUD 应用来创建和编辑用户信息。本教程我们将告诉您如何创建一个 CRUD 数据网格(DataGrid)。 我们将使用 可编辑的数据网格(DataGrid)插件 来完成这些 CRUD 操作动作。

  步骤 1:在 HTML 标签中定义数据网格(DataGrid)

  

  toolbar="#toolbar" idField="id"

  rownumbers="true" fitColumns="true" singleSelect="true">

  

  

  

  

  

  

  

  

  

First Name Last Name Phone Email

  

  New

  Destroy

  Save

  Cancel

  

  步骤 2:使用可编辑的数据网格(DataGrid)

  $(‘#dg‘).edatagrid({

  url: ‘get_users.php‘,

  saveUrl: ‘save_user.php‘,

  updateUrl: ‘update_user.php‘,

  destroyUrl: ‘destroy_user.php‘

  });

  我们应该提供 ‘url‘、‘saveUrl‘、‘updateUrl‘ 和 ‘destroyUrl‘ 属性来编辑数据网格(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 实例

  jeasyui-app-crud2.zip

  (编辑:雷林鹏 来源:网络 侵删)

原文地址:https://www.cnblogs.com/linpeng1/p/11345755.html

时间: 2024-10-08 14:50:49

雷林鹏分享:jQuery EasyUI 应用 - 创建 CRUD 数据网格(DataGrid)的相关文章

jQuery EasyUI 应用 - 创建 CRUD 数据网格(DataGrid)

在上一章节中,我们使用对话框(dialog)组件创建了 CRUD 应用来创建和编辑用户信息.本教程我们将告诉您如何创建一个 CRUD 数据网格(DataGrid). 我们将使用 可编辑的数据网格(DataGrid)插件 来完成这些 CRUD 操作动作. 步骤 1:在 HTML 标签中定义数据网格(DataGrid) <table id="dg" title="My Users" style="width:550px;height:250px"

雷林鹏分享jQuery EasyUI 数据网格 - 动态改变列

数据网格(DataGrid)列可以使用 'columns' 属性简单地定义.如果您想动态地改变列,那根本没有问题.为了改变列,您可以重新调用datagrid 方法,并传递一个新的 columns 属性. 创建数据网格(DataGrid) url="data/datagrid_data.json" singleSelect="true" iconCls="icon-save"> $('#tt').datagrid({ columns:[[ {

雷林鹏分享jQuery EasyUI 布局 - 在面板中创建复杂布局

面板(Panel)允许您创建用于多种用途的自定义布局.在本实例中,我们使用面板(panel)和布局(layout)插件来创建一个 msn 消息框. 我们在区域面板中使用多个布局(layout).在消息框的顶部我们放置一个查询输入框,同时在右边放置一个人物图片.在中间的区域我们通过设置 split 属性为 true,把这部分切割为两部分,允许用户改变区域面板的尺寸大小. 以下就是所有代码: Search: Hi,I am easyui. 我们不需要写任何的 javascript 代码,它自己有非常

雷林鹏分享:PHP MySQL 创建数据库

数据库存有一个或多个表. 你需要 CREATE 权限来创建或删除 MySQL 数据库. 使用 MySQLi 和 PDO 创建 MySQL 数据库 CREATE DATABASE 语句用于在 MySQL 中创建数据库. 在下面的实例中,创建了一个名为 "myDB" 的数据库: 实例 (MySQLi - 面向对象) connect_error) { die("连接失败: " . $conn->connect_error); } // 创建数据库 $sql = &q

雷林鹏分享:jQuery EasyUI 应用 - 创建展开行明细编辑表单的 CRUD 应用

当切换数据网格视图(datagrid view)到 'detailview',用户可以展开一行来显示一些行的明细在行下面.这个功能允许您为防止在明细行面板(panel)中的编辑表单(form)提供一些合适的布局(layout).在本教程中,我们使用数据网格(datagrid)组件来减小编辑表单(form)所占据空间. 步骤 1:在 HTML 标签中定义数据网格(DataGrid) url="get_users.php" toolbar="#toolbar" fitC

雷林鹏分享:jQuery EasyUI 拖放 - 创建拖放的购物车

jQuery EasyUI 拖放 - 创建拖放的购物车 如果您能够通过您的 Web 应用简单地实现拖动和放置,您就会知道一些特别的东西.通过 jQuery EasyUI,我们在 Web 应用中可以简单地实现拖放功能. 在本教程中,我们将向您展示如何创建一个启用用户拖动和放置用户想买的商品的购物车页面.购物篮中的物品和价格将更新. 显示页面上的商品 Balloon Price:$25 Feeling Price:$25 正如您所看到的上面的代码,我们添加一个包含一些 元素的 元素来显示商品.所有商

雷林鹏分享:jQuery EasyUI 数据网格 - 列运算

jQuery EasyUI 数据网格 - 列运算 在本教程中,您将学习如何在可编辑的数据网格(datagrid)中包含一个运算的列.一个运算列通常包含一些从一个或多个其他列运算的值. 首先,创建一个可编辑的数据网格(datagrid).这里我们创建了一些可编辑列,'listprice'.'amount' 和 'unitcost' 列定义为 numberbox 编辑类型.运算列是 'unitcost' 字段,将是 listprice 乘以 amount 列的结果. title="Editable

雷林鹏分享:jQuery EasyUI 数据网格 - 添加查询功能

jQuery EasyUI 数据网格 - 添加查询功能 本实例演示如何从数据库得到数据,并将它们显示在数据网格(datagrid)中.然后演示如何根据用户输入的搜索关键词搜寻显示结果. 创建数据网格(DataGrid) 创建带有分页功能的数据网格(datagrid),然后添加工具栏到其中. url="datagrid24_getdata.php" toolbar="#tb" title="Load Data" iconCls="icon

雷林鹏分享:jQuery EasyUI 数据网格 - 条件设置行背景颜色

jQuery EasyUI 数据网格 - 条件设置行背景颜色 本教程将向您展示如何根据一些条件改变数据网格(datagrid)组件的行样式.当 listprice 值大于 50 时,我们将为该行设置不同的颜色. 数据网格(datagrid)的 rowStyler 函数的设计目的是允许您自定义行样式.以下代码展示如何改变行样式: url="data/datagrid_data.json" singleSelect="true" fitColumns="tru