サブグリッドでjqGrid 4.4.1を使用しています。
さまざまな種類のデータを取得していますが、このサンプル データでは、[展開] をクリックしても 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>
出力：
