Question

我正在使用jqGrid 4.4.1和subGrid。

我正在提取不同类型的数据但是对于此示例数据，单击“展开”时我无法获得subGrid。

以下是示例代码。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>SubGrid Real Data</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/redmond/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.3.2/css/ui.jqgrid.css" />
<style>
    .ui-jqgrid .ui-subgrid td.subgrid-data {
        border-top: 0 none !important;
        border-right: 0 none !important;
        border-bottom: 0 none !important;
    }
    .ui-jqgrid .ui-subgrid span.ui-icon ui-icon-carat-1-sw {
                background-color: #FFFFFF !important; 
                background-image: none !important;
                border: 0px 0px 1px 1px;
    }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.4.1/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript">
    $.jgrid.no_legacy_api = true;
    $.jgrid.useJSON = true;
</script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.4.1/js/jquery.jqGrid.src.js"></script>

<script type="text/javascript">
//<![CDATA[
    /*global $ */
    /*jslint browser: true, eqeq: true, plusplus: true */
    $(function () {
        "use strict";
        var colModelData =[
            {"width":"300","name":"itemName","editable":false}
            ],
        colNamesArray = ["Name"],
        subColModel = [
            {"width":"300","name":"itemName","editable":false}
            ],  

        myData = [{"id":"metlab panel","itemName":"Metlab Panel",
        "subGridData":[
            {"itemName":"CMP BILIRUBIN,TOTAL"},
            {"itemName":"CMP CALCIUM"},
            {"itemName":"CMP CREATININE"},
            {"itemName":"CMP POTASSIUM"},
            {"itemName":"CMP PROTEIN,TOTAL"},
            {"itemName":"CMP SODIUM"},
            {"itemName":"CMP GLUCOSE"}]
        }];

        $("#list").jqGrid({
            datatype: "local",
            data: myData,
            colNames: colNamesArray,
            colModel: colModelData,
            gridview: true,
            height: "100%",
            width: "100%",
            caption: "Create subgrid from local data",
            subGrid: true,
            subGridOptions: {
                reloadOnExpand: false,
                selectOnExpand: false
            },
            subGridRowExpanded: function (subgridDivId, parentRowId) {

                    var $subgrid = $("<table id='" + subgridDivId + "_t'></table>");
                    $subgrid.appendTo("#" + $.jgrid.jqID(subgridDivId));
                    var data = $(this).jqGrid("getLocalRow", parentRowId);
                    console.log(data.subGridData); // I can see data
                    $subgrid.jqGrid({
                            datatype: "local",
                            data: data.subGridData,
                            colModel:subColModel,
                            height: "100%",
                            width: "100%",
                            autoencode: true,
                            gridview: true,
                            rowNum: 200

                    });
            $subgrid.closest("div.ui-jqgrid-view")
                    .children("div.ui-jqgrid-hdiv").hide();
        }   

        });
    });

//]]>
</script>

输出：

Output

Answer 1

使用id时，您的问题不正确。

第一个错误是id使用空白。如果您使用例如"id":"metlab panel"替换"id":"metlabpanel"，则会看到子网格。

下一个问题是子网格的数据没有id。在jqGrid将使用值1,2,3，...作为rowid的情况下。如果一个人扩展至少两个子网格，你将有id重复，这将是一个问题。要解决此问题，可以将idPrefix用于基于父级的rowid创建的子网格。例如

idPrefix: "s_" + parentRowId + "_"

无论如何，总是认为为主网格或子网格的每一行提供唯一的rowid。

The modified demo正确显示子网格

enter image description here

最好的是为您创建的每个行或网格或子网格填充id属性。如果您不确定要分配的值，可以拨打$.jgrid.randId()，这将提供安全的唯一值，您可以将其用作id。

jqGrid：无法在子网格中获取数据

输出：

1 个答案: