Jquery jqGrid:无法在子网格中获取数据_Jquery_Jqgrid

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

jquery jqgrid

Jquery jqGrid:无法在子网格中获取数据,jquery,jqgrid,Jquery,Jqgrid,我将jqGrid 4.4.1与子网格一起使用我正在提取不同类型的数据，但是对于这个示例数据，当单击“展开”时，我无法获取子网格下面是示例代码 <!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>

我将jqGrid 4.4.1与子网格一起使用

我正在提取不同类型的数据，但是对于这个示例数据，当单击“展开”时，我无法获取子网格

下面是示例代码

<!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>


亚网格真实数据
.ui jqgrid.ui subgrid td.subgrid-data{
边框顶部：0无！重要；
右边框：0无！重要；
边框底部：0无！重要；
}
.ui jqgrid.ui子网格span.ui-icon ui-icon-carat-1-sw{
背景色：#FFFFFF！重要；
背景图像：无！重要；
边框：0px 0px 1px 1px；
}
$.jgrid.no_legacy_api=true；
$.jgrid.useJSON=true；
//

输出：

使用

id

时，您的问题不正确

第一个错误是使用带有空格的

id

。如果将

“id”：“metlab panel”

替换为例如

“id”：“metlabpanel”

则可以看到子网格

下一个问题是子网格的数据没有

id

作为all。在这种情况下，jqGrid将使用值1、2、3。。。作为罗维德。如果一个将展开至少两个子网格，您将有重复的id，这将是一个问题。要解决此问题，可以对子网格使用

idPrefix

，子网格是基于父级的rowid创建的。比如说

idPrefix: "s_" + parentRowId + "_"

无论如何，您应该始终考虑为主网格或子网格的每一行提供唯一的rowid

正确显示子栅格

最好是为您创建的每一行、网格或子网格填充

id

属性。如果您不确定要分配哪个值，可以调用

$.jgrid.randId（）

，它将提供安全的唯一值，您可以将其用作

id

谢谢您的回答，。我的数据中每行都有唯一的项目id。但我把它从演示中删除了。是的，我的脑海中闪过了我的空间如果您能告诉我如何从子网格单元中删除“图标”。我试图改变

ui小部件内容子网格单元格的CSS，但没有改变work@HardikMishra：不客气！我不明白在修复id
s之后，“无法在子网格中获取数据”的问题是否得到了解决？您不应该在一个问题中放置多个独立问题。stackoverflow的目标是与其他人共享问题和答案。交换性问题很难索引，因此其他人可能找不到所需的信息。：谢谢你的建议。将来会小心的。：）