easyui教程 php,Easyui 创建子网格_EasyUI 教程
示例
使用数据网格(datagrid)的详细视图,用户可以展开一行来显示附加的详细信息。 任何内容都可以加载作为行详细,子网格也可以动态加载。 本教程将向您展示如何在主网格上创建一个子网格。
步骤 1:创建主网格
url="datagrid22_getdata.php"
title="DataGrid - SubGrid"
singleSelect="true" fitColumns="true">
Item IDProduct IDList PriceUnit CostAttributeStatus
步骤 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);
easyui教程 php,Easyui 创建子网格_EasyUI 教程相关推荐
- idea建springcloud项目_idea创建springcloud项目图文教程(EurekaServer注册中心)
http://blog.csdn.net/hcmony/article/details/77854999 idea创建springcloud项目图文教程(EurekaServer注册中心)(六) 1, ...
- easyui treegrid php,jQuery EasyUI 数据网格与树插件 – Treegrid 树形网格 | 菜鸟教程
jQuery EasyUI 数据网格与树插件 - Treegrid 树形网格 jQuery EasyUI 插件 扩展自 $.fn.datagrid.defaults.通过 $.fn.treegrid. ...
- 雷林鹏分享:jQuery EasyUI 数据网格 - 创建属性网格
jQuery EasyUI 数据网格 - 创建属性网格 属性网格(property grid)带有一个内置的 expand(展开)/collapse(合并) 按钮,可以简单地为行分组.您可以简单地创建 ...
- php 可以编辑treegrid,Easyui Treegrid 树形网格_EasyUI 插件
扩展自 $.fn.datagrid.defaults.通过 $.fn.treegrid.defaults 重写默认的 defaults. 树形网格(treegrid)用于以网格形式显示分层数据.它是基 ...
- java提示框easyui风格_[Java教程]jQuery EasyUI 提示框(Messager)用法
[Java教程]jQuery EasyUI 提示框(Messager)用法 0 2013-10-10 19:00:06 jQuery EasyUI 提示框(Messager)不仅强大,而且也不用任何的 ...
- ajax treegrid 选中,easyui treeGrid异步加载子节点示例
easyui treeGrid异步加载子节点示例.如果要异步加载treegrid的子节点,需要输出扁平的数据结构,然后通过_parentId来控制treegrid的父节点子节点结构.嵌套的childr ...
- JQuery Easyui/TopJUI 用JS创建数据表格并实现增删改查功能
JQuery Easyui/TopJUI 用JS创建数据表格并实现增删改查功能 JQuery Easyui/TopJUI 用JS创建数据表格并实现增删改查功能 html <table id=&q ...
- Java Web当中使用EasyUI|快速建立漂亮的后台网站(教程+源代码)
项目源代码下载:https://download.csdn.net/download/qq_44757034/12726812 一.EasyUI的概述 1.什么是EasyUI jQuery EasyU ...
- mysql 如何添加子账号_05 MySQL 创建子账号 - MySQL 基础教程
上一节介绍了如何和 MySQL 建立连接登录到 MySQL,并且对初始化密码进行了修改,本节主要介绍如何新建一个子账号,并且使用子账号登录 MySQL. 1. 使用 root 账号登录 MySQL 使 ...
- SAP UI5 初学者教程之九 - 创建第一个 Component 的试读版
一套适合 SAP UI5 初学者循序渐进的学习教程 教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 初学者教程之一:Hello World SAP UI5 初学者教程之二:SAP UI5 ...
最新文章
- 宋体节点hdoj 1520 Anniversary party(树形dp)
- web3.js(三)查询智能合约币数量(erc20)
- sql在线模拟器_力荐一款在线SQL模拟器
- 将对象映射到多个XML模式–天气示例
- CSC 121, 122.. MAT 181, 182, 252, 271, 281, 474.. ECN 272, 273, 372, 472
- 营业税计提及企业所得税的相关计算公式
- ubuntu系统安装python hello_ubuntu 下python安装及hello world
- 我的docker随笔14:MySQL操作实例
- ❤️《Mybatis从基础到高级》(建议收藏)❤️
- 《数字电子技术基础》3.3 CMOS门电路(下)
- Python Cartopy地图投影【2】
- 一阅阅读-ios上的免费换源小说阅读器
- Matlab求四面体体积
- Kafka配置broker映射错误报错Discovered coordinator xxx rack: null
- mysql 磁盘组_Oracle asm 添加磁盘组
- 【Ubuntu】基于 Ubuntu 搭建 Discuz 论坛
- Keepalived主主虚拟路由器与虚拟服务器
- java实现统计pv和uv_shell统计pv与uv、独立ip的方法
- 高光谱影像伪彩色显示
- 如何在家自学编程成为一名程序员?