55面试教程网 jQuery EasyUI 技术教程
jQuery EasyUI 技术教程
jQuery EasyUI 教程jQuery EasyUI 简介jQuery EasyUI 应用 – 创建 CRUD 应用jQuery EasyUI 应用 – 创建 CRUD 数据网格jQuery EasyUI 应用 – 创建展开行明细编辑表单的 CRUD 应用jQuery EasyUI 应用 – 创建 RSS Feed 阅读器jQuery EasyUI 拖放 – 基本的拖动和放置jQuery EasyUI 拖放 – 创建拖放的购物车jQuery EasyUI 拖放 – 创建学校课程表jQuery EasyUI 菜单与按钮 – 创建简单的菜单jQuery EasyUI 菜单与按钮 – 创建链接按钮jQuery EasyUI 菜单与按钮 – 创建菜单按钮jQuery EasyUI 菜单与按钮 – 创建分割按钮jQuery EasyUI 布局 – 为网页创建边框布局jQuery EasyUI 布局 – 在面板中创建复杂布局jQuery EasyUI 布局 – 创建折叠面板jQuery EasyUI 布局 – 创建标签页(Tabs)jQuery EasyUI 布局 – 动态添加标签页(Tabs)jQuery EasyUI 布局 – 添加自动播放标签页(Tabs)jQuery EasyUI 布局 – 创建 XP 风格左侧面板jQuery EasyUI 数据网格 – 转换 HTML 表格为数据网格jQuery EasyUI 数据网格 – 取得选中行数据jQuery EasyUI 数据网格 – 添加查询功能jQuery EasyUI 数据网格 – 添加工具栏jQuery EasyUI 数据网格 – 创建复杂工具栏jQuery EasyUI 数据网格 – 设置冻结列jQuery EasyUI 数据网格 – 动态改变列jQuery EasyUI 数据网格 – 格式化列jQuery EasyUI 数据网格 – 设置排序jQuery EasyUI 数据网格 – 自定义排序jQuery EasyUI 数据网格 – 创建列组合jQuery EasyUI 数据网格 – 添加复选框jQuery EasyUI 数据网格 – 自定义分页jQuery EasyUI 数据网格 – 启用行内编辑jQuery EasyUI 数据网格 – 扩展编辑器jQuery EasyUI 数据网格 – 列运算jQuery EasyUI 数据网格 – 合并单元格jQuery EasyUI 数据网格 – 创建自定义视图jQuery EasyUI 数据网格 – 创建页脚摘要jQuery EasyUI 数据网格 – 条件设置行背景颜色jQuery EasyUI 数据网格 – 创建属性网格jQuery EasyUI 数据网格 – 扩展行显示细节jQuery EasyUI 数据网格 – 创建子网格jQuery EasyUI 数据网格 – 使用虚拟滚动视图显示海量数据jQuery EasyUI 数据网格 – 添加分页组件jQuery EasyUI 窗口 – 自定义窗口工具栏jQuery EasyUI 窗口 – 窗口与布局jQuery EasyUI 窗口 – 创建对话框jQuery EasyUI 窗口 – 自定义带有工具条和按钮的对话框jQuery EasyUI 树形菜单 – 使用标记创建树形菜单jQuery EasyUI 树形菜单 – 创建异步树形菜单jQuery EasyUI 树形菜单 – 树形菜单添加节点jQuery EasyUI 树形菜单 – 创建带复选框的树形菜单jQuery EasyUI 树形菜单 – 树形菜单拖放控制jQuery EasyUI 树形菜单 – 树形菜单加载父/子节点jQuery EasyUI 树形菜单 – 创建基础树形网格jQuery EasyUI 树形菜单 – 创建复杂树形网格jQuery EasyUI 树形菜单 – 树形网格动态加载jQuery EasyUI 树形菜单 – 树形网格添加分页jQuery EasyUI 树形菜单 – 树形网格惰性加载节点jQuery EasyUI 表单 – 创建异步提交表单jQuery EasyUI 表单 – 表单验证jQuery EasyUI 表单 – 创建树形下拉框(ComboTree)jQuery EasyUI 表单 – 格式化下拉框(ComboBox)jQuery EasyUI 表单 – 过滤下拉数据网格(ComboGrid)jQuery EasyUI 插件jQuery EasyUI 扩展

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

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

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

步骤 1:创建主网格

<table id="dg" style="width:700px;height:250px"
        url="datagrid22_getdata.php" 
        title="DataGrid - SubGrid"
        singleSelect="true" fitColumns="true">
    <thead>
        <tr>
            <th field="itemid" width="80">Item ID</th>
            <th field="productid" width="100">Product ID</th>
            <th field="listprice" align="right" width="80">List Price</th>
            <th field="unitcost" align="right" width="80">Unit Cost</th>
            <th field="attr1" width="220">Attribute</th>
            <th field="status" width="60" align="center">Status</th>
        </tr>
    </thead>
</table>

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

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

<script type="text/javascript" src="http://www.w3cschool.cc/try/jeasyui/datagrid-detailview.js"></script>
$('#dg').datagrid({
    view: detailview,
    detailFormatter:function(index,row){
        return '<div style="padding:2px"><table class="ddv"></table></div>';
    },
    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