Created
February 18, 2012 00:19
-
-
Save katoy/1856467 to your computer and use it in GitHub Desktop.
jqgrid - treegrid using json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "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 | |
| ] | |
| } | |
| ] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment