如何用jquery easyui 数据网格
发布网友
发布时间:2022-05-10 05:18
我来回答
共1个回答
热心网友
时间:2022-04-22 14:06
使用数据网格的详细视图,用户可以展开一行来显示附加的详细信息。任何内容都可以加载作为行详细,子网格也可以动态加载。本教程将向您展示如何在主网格上创建一个子网格。
jQuery EasyUI最新试用版下载请猛戳 >>
查看jQuery EasyUI演示
Step 1:创建主数据网格
Item ID
Proct ID
List Price
Unit Cost
Attribute
Status
Step 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' 方法。
Step 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的树型网格要求的js格式必须拼成纵深的children形式吗,这样...
可以直接返回整个树的json 我这边的树的数据不是很多最多也就几千条,所以都是查询所有数据,然后递归出整个需要的json。如果数据很多的话这种方式就不太适合,要像你一样分级加载了,点开的时候再加载下一层
jquery easyui datagrid 加载成功,选中某一行
你好!!jquery easyui datagrid中的 reload 不是这样用的~1.首先你需要设置datagrid的onLoadSuccess$('#dg').datagrid({onLoadSuccess : function(data){ $('#dg').datagrid('selectRow',3);}});2.onLoadSuccess如果是通过 data-options的方式设置的没问题,如果通过js脚本设置的话,需要保证在loa...
jquery easyui datagrid 加载成功,选中某一行
你好!!jquery easyui datagrid中的 reload 不是这样用的~1.首先你需要设置datagrid的onLoadSuccess$('#dg').datagrid({onLoadSuccess : function(data){ $('#dg').datagrid('selectRow',3);}});2.onLoadSuccess如果是通过 data-options的方式设置的没问题,如果通过js脚本设置的话,需要保证在loa...