---

jQuery EasyUI数据网格是一个非常强大、易于使用的插件，用于在Web页面中创建和管理数据表格。EasyUI数据网格可以帮助您快速而准确地查询、过滤和排序大量的数据，同时提高数据的可视性。

本文档将介绍如何使用EasyUI数据网格来扩展行显示细节。我们将使用EasyUI数据网格的行详细信息扩展功能来为每行添加更多的信息或功能，以便用户可以更方便地查看和处理数据。

步骤1：设置EasyUI数据网格

首先，我们需要设置EasyUI数据网格。这可以通过将EasyUI数据网格添加到我们的HTML页面中来实现。以下是一个基本的EasyUI数据网格设置：

<table id="dg" title="示例" class="easyui-datagrid" style="width:100%;height:450px"
        url="datagrid_data.json"
        toolbar="#toolbar" pagination="true"
        rownumbers="true" fitColumns="true" singleSelect="true">
    <thead>
        <tr>
            <th field="itemid" width="50">项目编号</th>
            <th field="productid" width="50">产品编号</th>
            <th field="listprice" width="50">商品价格</th>
            <th field="unitcost" width="50">单位成本</th>
            <th field="attr1" width="50">属性1</th>
            <th field="status" width="50">状态</th>
        </tr>
    </thead>
</table>

在以上代码中，我们使用了“dg”作为EasyUI数据网格的ID，同时在thead中定义了数据网格的列。

步骤2：定义行详细信息

接下来，我们需要定义行详细信息。行详细信息由HTML元素组成，可以是一个表格行、一段文本、一张图片或任何其他您想添加的元素。可以在以下方法中，通过返回行详细信息的HTML元素来定义每个数据网格行的详细信息：

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:'datagrid_data2.json',
        fitColumns:true,
        singleSelect:true,
        rownumbers:true,
        loadMsg:'',
        height:'auto',
        columns:[[
            {field:'itemid',title:'ID',width:100},
            {field:'listprice',title:'价格',width:100},
            {field:'unitcost',title:'成本',width:100},
            {field:'attr1',title:'属性1',width:100},
            {field:'status',title:'状态',width:100}
        ]],
        onResize:function(){
            $('#dg').datagrid('fixDetailRowHeight',index);
        },
        onLoadSuccess:function(){
            setTimeout(function(){
                $('#dg').datagrid('fixDetailRowHeight',index);
            },0);
        }
    });
    $('#dg').datagrid('fixDetailRowHeight',index);
}

以上方法中，detailFormatter()函数返回一个DIV元素，该元素包含一个名为“ddv”的表格。onExpandRow()函数负责创建“ddv”表格，并在行展开时调用。“row"参数是当前行的属性，你可以使用这些属性来添加HTML元素。

步骤3：设置“ddv”表格

接下来，我们需要设置我们刚刚创建的“ddv”表格。 这可以通过以下属性来实现：

url：保留“ddv”表中的数据源
fitColumns：自适应宽度
singleSelect：只允许选择一个行
rownumbers：显示行号
loadMsg：“加载信息”属性可以在数据加载时显示可自定义加载消息
height：设置表格的高度
columns：定义数据网格的列
onResize：调整大小事件
onLoadSuccess：加载成功事件

步骤4：设置高度

最后，在上述函数的代码中添加一个新行，例如：

<div style="padding:2px"><table class=“ddv” style="height: 200px;"></table></div>

可以使用CSS“height”属性来改变“ddv”表格的高度。默认情况下，“height”被设置为“auto”，这将使表格自适应 EasyUI数据网格的高度。为了使“ddv”表格的高度固定为200像素，我们将“height”设置为“200px”。

现在我们已经完成了扩展行显示细节的设置！您可以使用自己的数据源和HTML元素来自定义“ddv”表格以满足您对其外观和功能的需求。您还可以添加更多高级功能，例如排序、过滤、分页和查询，以便进行更精确的数据操作。

总结

在本文档中，我们提供了详细的说明，深入介绍了如何使用EasyUI数据网格的行详细信息扩展功能来为每个行添加更多的信息或功能，以便用户可以更方便地查询和处理数据。通过简单的四个步骤，您可以快速而准确地为EasyUI数据网格添加更多信息和功能。快来尝试吧！