jQuery EasyUI 数据网格 - 创建子网格

  使用数据网格(datagrid)的详细视图,用户可以展开一行来显示附加的详细信息。 任何内容都可以加载作为行详细,子网格也可以动态加载。 本教程将向您展示如何在主网格上创建一个子网格。

  步骤 1:创建主网格

  

  url="datagrid22_getdata.php"

  title="DataGrid - SubGrid"

  singleSelect="true" fitColumns="true">

  

  

  

  

  

  

  

  

  

  

  

Item ID Product ID List Price Unit Cost Attribute Status

  步骤 2:设置详细视图来显示子网格

  为了使用详细视图,请记得在页面头部引用视图脚本文件。

  

  $('#dg').datagrid({

  view: detailview,

  detailFormatter:function(index,row){

  return '

 

';

  },

  onExpandRow: function(index,row){

  var ddv = $(this).datagrid('getRowDetail',index).find('table.ddv');

  ddv.datagrid({

  url:'datagrid22_getdetail.php?itemid='+row.itemid,

  fitColumns:true,

  singleSelect:true,

  rownumbers:true,

  loadMsg:'',

  height:'auto',

  columns:[[

  {field:'orderid',title:'Order ID',width:100},

  {field:'quantity',title:'Quantity',width:100},

  {field:'unitprice',title:'Unit Price',width:100}

  ]],

  onResize:function(){

  $('#dg').datagrid('fixDetailRowHeight',index);

  },

  onLoadSuccess:function(){

  setTimeout(function(){

  $('#dg').datagrid('fixDetailRowHeight',index);

  },0);

  }

  });

  $('#dg').datagrid('fixDetailRowHeight',index);

  }

  });

  当用户点击展开按钮('+')时,'onExpandRow' 事件将被触发。 我们创建一个新的带有三列的子网格。 当子网格数据加载成功时或者改变尺寸大小时,请记得对主网格调用 'fixDetailRowHeight' 方法。

  步骤 3:服务器端代码

  datagrid22_getdata.php

  $result = array();

  include 'conn.php';

  $rs = mysql_query("select * from item where itemid in (select itemid from lineitem)");

  $items = array();

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

  array_push($items, $row);

  }

  echo json_encode($items);

  datagrid22_getdetail.php

  include 'conn.php';

  $itemid = mysql_real_escape_string($_REQUEST['itemid']);

  $rs = mysql_query("select * from lineitem where itemid='$itemid'");

  $items = array();

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

  array_push($items, $row);

  }

  echo json_encode($items);

  下载 jQuery EasyUI 实例

  jeasyui-datagrid-datagrid22.zip

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

雷林鹏分享:jQuery EasyUI 数据网格 - 创建子网格的更多相关文章

  1. 雷林鹏分享:jQuery EasyUI 数据网格 - 创建复杂工具栏

    jQuery EasyUI 数据网格 - 创建复杂工具栏 数据网格(datagrid)的工具栏(toolbar)可以包含按钮及其他组件. 您可以通个一个已存在的 DIV 标签来简单地定义工具栏布局,该 ...

  2. 雷林鹏分享:jQuery EasyUI 数据网格 - 创建列组合

    jQuery EasyUI 数据网格 - 创建列组合 easyui 的数据网格(DataGrid)可以创建列组合,如下所示: 在本实例中,我们使用平面数据来填充数据网格(DataGrid)的数据,并把 ...

  3. 雷林鹏分享:jQuery EasyUI 数据网格 - 创建自定义视图

    jQuery EasyUI 数据网格 - 创建自定义视图 在不同的情况下,您可能需要为数据网格(datagrid)运用更灵活的布局.对于用户来说,卡片视图(Card View)是个不错的选择.这个工具 ...

  4. 雷林鹏分享:jQuery EasyUI 数据网格 - 创建页脚摘要

    jQuery EasyUI 数据网格 - 创建页脚摘要 在本教程中,我们将向您展示如何在数据网格(datagrid)页脚显示摘要信息行. 为了显示页脚行,您应该设置 showFooter 属性为 tr ...

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

    jQuery EasyUI 数据网格 - 创建属性网格 属性网格(property grid)带有一个内置的 expand(展开)/collapse(合并) 按钮,可以简单地为行分组.您可以简单地创建 ...

  6. 雷林鹏分享:jQuery EasyUI 数据网格 - 设置冻结列

    jQuery EasyUI 数据网格 - 设置冻结列 本实例演示如何冻结一些列,当用户在网格上移动水平滚动条时,冻结列不能滚动到视图的外部. 为了冻结列,您需要定义 frozenColumns 属性. ...

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

    jQuery EasyUI 数据网格 - 动态改变列 数据网格(DataGrid)列可以使用 'columns' 属性简单地定义.如果您想动态地改变列,那根本没有问题.为了改变列,您可以重新调用dat ...

  8. 雷林鹏分享:jQuery EasyUI 数据网格 - 格式化列

    jQuery EasyUI 数据网格 - 格式化列 以下实例格式化在 easyui DataGrid 里的列数据,并使用自定义列的 formatter,如果价格小于 20 就将文本变为红色. 为了格式 ...

  9. 雷林鹏分享:jQuery EasyUI 数据网格 - 设置排序

    jQuery EasyUI 数据网格 - 设置排序 本实例演示如何通过点击列表头来排序数据网格(DataGrid). 数据网格(DataGrid)的所有列可以通过点击列表头来排序.您可以定义哪列可以排 ...

随机推荐

  1. 前端 --- 1 HTML

    一.文档结构 <!DOCTYPE html> <html lang="zh-CN"> #这个lang表示语言,zh-CN是中文的意思, 如果以英文为主,就写 ...

  2. oracle数据库数据库表空间查询及扩充

    1.查询表空间,及表空间的大小 SELECT t.tablespace_name, round(SUM(bytes / (1024 * 1024)), 0) ts_size FROM dba_tabl ...

  3. C#开发者工具网

    使用key值[123456]对[50cms]进行对称加密-在线DES对称加密/解密- 开发者工具网  http://tool.sufeinet.com/Encrypt/DesEncrypt.aspx? ...

  4. vim使用跳转列表 jumps 来跟踪 (历史位置的)导航

    参考: Vim使用跳转列表来跟踪你的导航,你可以通过这个列表来向前或者向后导航. 跳转列表保留所有地方的轨迹,它可以跟踪文件名.行号和列号. 查看调整列表::jumps 导航键 描述 CTRL-o 跳 ...

  5. Logstash Introduction

    https://www.cnblogs.com/aresxin/p/8035137.html Elasticsearch是个开源分布式搜索引擎,提供搜集.分析.存储数据三大功能.它的特点有:分布式,零 ...

  6. js选择排序

    选择排序 平均时间复杂度O(n*n) 最好情况O(n*n) 最差情况O(n*n) 空间复杂度O(1) 稳定性:不稳定 function chooseSort (arr) { var temp; var ...

  7. P4306 [JSOI2010]连通数

    思路 要求求每个点能到达的点数就是传递闭包 然后n^3Floyd可做,但是n=2000,然后bitset压位 复杂度\(O(\frac{n^3}{32})\),能过 代码 #include <c ...

  8. 百度地图自定义icon,定位偏移问题

    最近使用百度地图做一个调度系统,使用定义icon的marker,结果地图显示marker和实际位置偏移,最终参考文章: http://www.cnblogs.com/jz1108/archive/20 ...

  9. Codeforces 786 A. Berzerk

    题目链接:http://codeforces.com/problemset/problem/786/A 这个题出做$DIV2$的$C$以及$DIV1$的A会不会难了一点啊... 做法和题解并不一样,只 ...

  10. 前端html5/css基础知识

    https://www.cnblogs.com/clschao/articles/10073124.html