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

  jQuery EasyUI 数据网格 - 添加查询功能

  本实例演示如何从数据库得到数据,并将它们显示在数据网格(datagrid)中。然后演示如何根据用户输入的搜索关键词搜寻显示结果。

  创建数据网格(DataGrid)

  创建带有分页功能的数据网格(datagrid),然后添加工具栏到其中。

  

  url="datagrid24_getdata.php" toolbar="#tb"

  title="Load Data" iconCls="icon-save"

  rownumbers="true" pagination="true">

  

  

  

  

  

  

  

  

  

  

  

Item ID Product ID List Price Unit Cost Attribute Stauts

  工具栏定义如下:

  

  Item ID:

  

  Product ID:

  

  Search

  

  当用户输入查询值并按下查询按钮时,‘doSearch‘ 函数将被调用:

  function doSearch(){

  $(‘#tt‘).datagrid(‘load‘,{

  itemid: $(‘#itemid‘).val(),

  productid: $(‘#productid‘).val()

  });

  }

  上面的代码调用了 ‘load‘ 方法来加载新的数据网格(datagrid)数据。我们需要传递 ‘itemid‘ 和 ‘productid‘ 参数到服务器。

  服务器端代码

  include ‘conn.php‘;

  $page = isset($_POST[‘page‘]) ? intval($_POST[‘page‘]) : 1;

  $rows = isset($_POST[‘rows‘]) ? intval($_POST[‘rows‘]) : 10;

  $itemid = isset($_POST[‘itemid‘]) ? mysql_real_escape_string($_POST[‘itemid‘]) : ‘‘;

  $productid = isset($_POST[‘productid‘]) ? mysql_real_escape_string($_POST[‘productid‘]) : ‘‘;

  $offset = ($page-1)*$rows;

  $result = array();

  $where = "itemid like ‘$itemid%‘ and productid like ‘$productid%‘";

  $rs = mysql_query("select count(*) from item where " . $where);

  $row = mysql_fetch_row($rs);

  $result["total"] = $row[0];

  $rs = mysql_query("select * from item where " . $where . " limit $offset,$rows");

  $items = array();

  while($row = mysql_fetch_object($rs)){

  array_push($items, $row);

  }

  $result["rows"] = $items;

  echo json_encode($result);

  下载 jQuery EasyUI 实例

  jeasyui-datagrid-datagrid24.zip

  本文转载自:w3cschool(编辑:雷林鹏 来源:网络 侵删)

原文地址:https://www.cnblogs.com/pengpeng1208/p/10795549.html

时间: 2024-10-11 21:21:07

雷林鹏分享:jQuery EasyUI 数据网格 - 添加查询功能的相关文章

雷林鹏分享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 代码,它自己有非常

雷林鹏分享:jQuery EasyUI 数据网格 - 创建属性网格

jQuery EasyUI 数据网格 - 创建属性网格 属性网格(property grid)带有一个内置的 expand(展开)/collapse(合并) 按钮,可以简单地为行分组.您可以简单地创建一个可编辑属性的分层(hierarchical)列表. 设置 HTML url="propertygrid_data.json" showGroup="true" scrollbarSize="0" > 准备 json 数据 [ {"

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

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

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

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

C#数据层添加事务功能

例子 public bool Save(ProjectModel project) { int Result = 0; SqlConnection Conn = new SqlConnection(SqlHelper.connectionString); Conn.Open(); SqlTransaction Trans; Trans = Conn.BeginTransaction(); try { SqlParameter[] sqlParameter1 = new SqlParameter[

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

在上一章节中,我们使用对话框(dialog)组件创建了 CRUD 应用来创建和编辑用户信息.本教程我们将告诉您如何创建一个 CRUD 数据网格(DataGrid). 我们将使用 可编辑的数据网格(DataGrid)插件 来完成这些 CRUD 操作动作. 步骤 1:在 HTML 标签中定义数据网格(DataGrid) toolbar="#toolbar" idField="id" rownumbers="true" fitColumns="

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

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

雷林鹏分享:jQuery EasyUI 扩展

jQuery EasyUI 扩展 Portal(制作图表.列表.球形图等) 数据网格视图(DataGrid View) 可编辑的数据网格(Editable DataGrid) 可编辑的树(Editable Tree) 数据网格行过滤(DataGrid Filter Row) 数据网格行拖放(Drag and Drop Rows in DataGrid) 树形网格行拖放(Drag and Drop Rows in TreeGrid) 主题(Themes) DWR 加载器(DWR Loader) R