katoy/tree.json

## tree.json
{
    "total":5,
    "records":5,
    "page":1,
    "rows":[{
            "id":"1",
            "cell":[
                "a",
                "AAA",
                0,"",false,true,true
            ]
        },
        {
            "id":"2",
            "cell":[
                "a-1",
                "BBB",
                1,"1",true,true,true
            ]
        },
        {
            "id":"3",
            "cell":[
                "a-2",
                "CCC",
                1,"1",false,true,true
            ]
        },
        {
            "id":"4",
            "cell":[
                "a-2-1",
                "DDD",
                2,"3",true,true,true
            ]
        },
        {
            "id":"5",
            "cell":[
                "b",
                "EEE",
                0,"",true,false,true
            ]
        }
    ]

## treegrid.html
ntsitm234070:gist youichikato$ cat treegrid.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Treegrid using json</title>

    <link rel="stylesheet" type="text/css" media="screen" href="css/ui-lightness/jquery-ui-1.8.17.custom.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />

    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("jquery", "1.7.1");
      google.load("jqueryui", "1.8.16");
    </script>

    <script type="text/javascript" src="js/i18n/grid.locale-en.js"></script>
    <script type="text/javascript" src="js/i18n/grid.locale-ja.js"></script>
    <script src="js/jquery.jqGrid.src.js" type="text/javascript"></script>

    <style type="text/css">
      html, body {
        margin: 0;
        padding: 0;
      }
    </style>

    <script type="text/javascript">
      $(function() {
        "use strict";

        $("#treegrid").jqGrid({
          url:'./tree.json',
          datatype: 'json',
          mtype: 'GET',

          treeGrid: true,
          treeGridModel: 'adjacency',
          ExpandColumn : 'key',
          // See http://jquery.keicode.com/ui/icons.php
          treeIcons: {leaf:'ui-icon-document'},

          colNames:['Key','Value'],
          colModel :[
              {name:'key', index:'key'},
              {name:'value', index:'value'}
          ],
          pager: '#pager',
          rowNum:10,
          rowList:[10,20,30],
          sortname: 'key',
          sortorder: 'desc',
          viewrecords: true,
          gridview: true,
          caption: 'Tree Grid',
          width: 600
      });
      });
    </script>

  </head>
  <body>
    <div style="margin: 10px;">
      <table id="treegrid"></table>
      <div id="pager"></div>
    </div>
  </body>
</html>
	{
	"total":5,
	"records":5,
	"page":1,
	"rows":[{
	"id":"1",
	"cell":[
	"a",
	"AAA",
	0,"",false,true,true
	]
	},
	{
	"id":"2",
	"cell":[
	"a-1",
	"BBB",
	1,"1",true,true,true
	]
	},
	{
	"id":"3",
	"cell":[
	"a-2",
	"CCC",
	1,"1",false,true,true
	]
	},
	{
	"id":"4",
	"cell":[
	"a-2-1",
	"DDD",
	2,"3",true,true,true
	]
	},
	{
	"id":"5",
	"cell":[
	"b",
	"EEE",
	0,"",true,false,true
	]
	}
	]
	ntsitm234070:gist youichikato$ cat treegrid.html
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Treegrid using json</title>

	<link rel="stylesheet" type="text/css" media="screen" href="css/ui-lightness/jquery-ui-1.8.17.custom.css" />
	<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />

	<script type="text/javascript" src="https://www.google.com/jsapi"></script>
	<script type="text/javascript">
	google.load("jquery", "1.7.1");
	google.load("jqueryui", "1.8.16");
	</script>

	<script type="text/javascript" src="js/i18n/grid.locale-en.js"></script>
	<script type="text/javascript" src="js/i18n/grid.locale-ja.js"></script>
	<script src="js/jquery.jqGrid.src.js" type="text/javascript"></script>

	<style type="text/css">
	html, body {
	margin: 0;
	padding: 0;
	}
	</style>

	<script type="text/javascript">
	$(function() {
	"use strict";

	$("#treegrid").jqGrid({
	url:'./tree.json',
	datatype: 'json',
	mtype: 'GET',

	treeGrid: true,
	treeGridModel: 'adjacency',
	ExpandColumn : 'key',
	// See http://jquery.keicode.com/ui/icons.php
	treeIcons: {leaf:'ui-icon-document'},

	colNames:['Key','Value'],
	colModel :[
	{name:'key', index:'key'},
	{name:'value', index:'value'}
	],
	pager: '#pager',
	rowNum:10,
	rowList:[10,20,30],
	sortname: 'key',
	sortorder: 'desc',
	viewrecords: true,
	gridview: true,
	caption: 'Tree Grid',
	width: 600
	});
	});
	</script>

	</head>
	<body>
	<div style="margin: 10px;">
	<table id="treegrid"></table>
	<div id="pager"></div>
	</div>
	</body>
	</html>