My Random Tech Stuff: jqGrid TreeGrid with JSON

Wednesday, September 15, 2010

jqGrid TreeGrid with JSON

The example below shows how to use TreeGrid using jqGrid with JSON.

index.html

<!DOCTYPE html> 
<html> 
  <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
    <title>jqGrid Example Page</title> 
    <link type="text/css" href="css/smoothness/jquery-ui-1.8.4.custom.css" rel="stylesheet" /> 
    <link type="text/css" href="css/ui.jqgrid.css" rel="stylesheet" /> 
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> 
    <script type="text/javascript" src="js/jquery-ui-1.8.4.custom.min.js"></script> 
    <script type="text/javascript" src="js/i18n/grid.locale-en.js"></script> 
    <script type="text/javascript" src="js/jquery.jqGrid.min.js"></script> 
    <script type="text/javascript">     
      $(function() { 
          $("#treegrid").jqGrid({ 
              url: 'tree.json', 
              datatype: 'json', 
              mtype: 'GET', 
              colNames: ["ID", "Description", "Total"], 
              colModel: [{ 
                  name: 'id', 
                  index: 'id', 
                  width: 1, 
                  hidden: true, 
                  key: true 
              }, { 
                  name: 'desc', 
                  index: 'desc', 
                  hidden: false, 
                  sortable: true 
              }, { 
                  name: 'num', 
                  index: 'num', 
                  hidden: false, 
                  sortable: true 
              }], 
              treeGridModel: 'adjacency', 
              height: 'auto', 
              width: '500', 
              pager: "#ptreegrid", 
              treeGrid: true, 
              ExpandColumn: 'desc', 
              ExpandColClick: true, 
              caption: "Tree Grid Example" 
          }) 
      }); 
    </script> 
    <style type="text/css"> 
        body { 
          font: 62.5% "Trebuchet MS", sans-serif; 
          margin: 50px; 
        } 
    </style> 
  </head> 
  <body> 
    <h1>jqGrid Example</h1> 
    <h2>Tree Grid</h2> 
    <table id="treegrid"></table> 
    <div id="ptreegrid"></div> 
  </body> 
</html>

tree.json

{ 
    "page": 1, 
    "total": 1, 
    "records": 2, 
    "rows": [ 
       {"id": 1, "cell": ["1", "Super Item", "300", 0, null, false, false]}, 
           {"id": 2, "cell": ["2", "Item 1", "100", 1, 1, false, false]}, 
           {"id": 3, "cell": ["3", "Sub Item 1", "50", 2, 2, true, true]}, 
           {"id": 4, "cell": ["4", "Sub Item 2", "25", 2, 2, false, false]}, 
           {"id": 5, "cell": ["5", "Sub-sub Item 1", "25", 3, 4, true, true]}, 
           {"id": 6, "cell": ["6", "Sub Item 3", "25", 2, 2, true, true]}, 
           {"id": 7, "cell": ["7", "Item 2", "200", 1, 1, false, false]}, 
           {"id": 8, "cell": ["8", "Sub Item 1", "100", 2, 7, false, false]}, 
           {"id": 9, "cell": ["9", "Sub-sub Item 1", "50", 3, 8, true, true]}, 
           {"id": 10, "cell": ["10", "Sub-sub Item 2", "50", 3, 8, true, true]}, 
       {"id": 11, "cell": ["11", "Sub Item 2", "100", 2, 7, true, true]} 
    ] 
}