Question

我正在使用此示例代码创建网格。

<!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>
    .groupColumn {
            background-color: #E3E3D7 !important;
            border: 1px solid #F4F4e5;
            font-weight: bold; !important;
    }
    .lockedColumn {
            background-color: #E3E3D7 !important;
            border: 1px solid #F4F4e5;
    }
    .ui-jqgrid .ui-subgrid td.subgrid-data {
        border-top: 0 none !important;
        border-right: 0 none !important;
        border-bottom: 0 none !important;
    }

</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 =[{"classes":"groupColumn","name":"Name","frozen":true,"editable":false},{"width":"120","name":"24394","editable":false},{"width":"120","name":"24390","editable":false},{"width":"120","name":"24387","editable":false},{"width":"120","name":"24386","editable":false},{"width":"120","name":"24385","editable":false},{"width":"120","name":"24383","editable":false},{"width":"120","name":"24369","editable":false},{"width":"120","name":"24306","editable":false}],
            colNamesArray = ["Name","12/21/2012","12/10/2012","12/03/2012","11/27/2012","11/15/2012","11/12/2012","11/09/2012","10/15/2012"],
         myData = [{"id":"group1","subGridData":[{"id":"child1","24369":"","24387":"","24394":"138 lb 200 oz","24306":"138","24390":"138 lb 100 oz","name":"Weight","24385":"","24386":"138 lb 750 oz","24383":""},{"id":"child8","24369":"","24387":"","24394":"Test Note","24306":"","24390":"","name":"Notes","24385":"","24386":"","24383":""}],"name":"Miscellaneous"}];
        var mainGridPrefix = "s_";
        $("#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: true,
                    openicon: ""*/
                },
            subGridRowExpanded: function (subgridDivId, parentRowId) {
                    var $subgrid = $("<table id='" + subgridDivId + "_t'></table>");
                    $subgrid.appendTo("#" + $.jgrid.jqID(subgridDivId));
                    var data = $(this).jqGrid("getLocalRow", parentRowId);
                    $subgrid.jqGrid({
                            datatype: "local",
                            data: $(this).jqGrid("getLocalRow", parentRowId).subGridData,
                            colModel:colModelData,
                            height: "100%",
                            autoencode: true,
                            gridview: true,
                            idPrefix: parentRowId + "_"
                    });
            $subgrid.closest("div.ui-jqgrid-view")
                    .children("div.ui-jqgrid-hdiv").hide();
        }   

        });

        //$("#list").jqGrid("toggleSubGridRow", 'm1');
        //$("#list").jqGrid("toggleSubGridRow", 'm3');
    });
//]]>
</script>

除第一个之外的其他列显示的值。这似乎有一个小问题，但它让我发疯。

输出：

enter image description here

Answer 1

您需要在"name":"Name"中将"name":"name"更改为colModelData，因为您在数据中使用name属性"name":"Miscellaneous"，"name":"Weight"，{ {1}}）。更改代码中一个字符的大小写后问题将得到解决

enter image description here

（见the demo）

jqGrid第一列数据未显示

1 个答案: