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

时间:2022-08-20 20:31:56

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

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

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

  步骤 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(编辑:雷林鹏 来源:网络 侵删)