jEasyUI 创建子网格学习笔记

1. 简介

jEasyUI 是一款基于 jQuery 的 UI 组件库。它提供了各种常见的 UI 组件，如表格、树形控件、对话框等。其中最强大的组件之一是 datagrid 表格控件，它可以方便地展示和操作数据。而子网格则是 datagrid 的扩展功能之一，它可以在一个表格中展示另一个表格的数据。这个功能非常实用，尤其是在需要展示复杂数据的时候。

2. 创建子网格

要创建子网格，我们需要使用 datagrid 的 expandRow 方法。该方法接收两个参数，第一个参数是行的索引，第二个参数是子网格的配置信息。子网格的配置信息通常包含以下属性：

Copy Code
{
    view: 'datagrid',
    detailFormatter: function(index, row){
        // 返回子网格的内容
    },
    onExpandRow: function(index, row){
        // 子网格展开时触发的事件
    }
}

其中，view 属性指定了子网格使用的控件类型，这里我们使用了 datagrid；detailFormatter 属性是一个函数，用于返回子网格的内容；onExpandRow 属性是一个函数，当子网格展开时会触发该函数。

下面是一个简单的例子：

Copy Code
<table id="dg"></table>

<script>
$(function(){
    $('#dg').datagrid({
        url: 'get_data.php',
        columns: [[
            {field:'name',title:'Name',width:100},
            {field:'email',title:'Email',width:100},
            {field:'phone',title:'Phone',width:100}
        ]],
        onExpandRow: function(index,row){
            var ddv = $(this).datagrid('getRowDetail',index).find('table.ddv');
            ddv.datagrid({
                url:'get_sub_data.php?id='+row.id,
                fitColumns:true,
                singleSelect:true,
                columns:[[
                    {field:'sub_name',title:'Sub Name',width:100},
                    {field:'sub_email',title:'Sub Email',width:100},
                    {field:'sub_phone',title:'Sub Phone',width:100}
                ]],
                onResize:function(){
                    $('#dg').datagrid('fixDetailRowHeight',index);
                },
                onLoadSuccess:function(data){
                    setTimeout(function(){
                        $('#dg').datagrid('fixDetailRowHeight',index);
                    },0);
                }
            });
            $('#dg').datagrid('fixDetailRowHeight',index);
        }
    });
});
</script>

以上代码创建了一个 datagrid 表格控件，并设置了一些列。当用户展开某一行时，子网格会自动加载并显示相关数据。