<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My First Grid</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap.min14ed.css" />
<link rel="stylesheet" type="text/css" media="screen" href="jqgrid/ui.jqgridffe4.css" />
<style>
html, body {
margin: 0;
padding: 0;
font-size: 75%;
}
</style>
<script src="jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="jqgrid/i18n/grid.locale-cnffe4.js" type="text/javascript"></script>
<script src="jqgrid/jquery.jqGrid.minffe4.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$.jgrid.defaults.styleUI="Bootstrap";
var topicjson={
"response": [
{
"id": "1",
"elementName": "Grouping",
"url":"/asd/asda",
level:"0", parent:"", isLeaf:false, expanded:false, loaded:true
},
{
"id": "1_1",
"elementName": "Simple Grouping",
"url":"/asd/12",
level:"1", parent:"1", isLeaf:true, expanded:false, loaded:true
},
{
"id": "1_2",
"elementName": "May be some other grouping",
"url":"/asd/14342",
level:"1", parent:"1", isLeaf:true, expanded:false, loaded:true
},
{
"id": "2",
"elementName": "CustomFormater",
level:"0", parent:"", isLeaf:false, expanded:false, loaded:true
},
{
"id": "2_1",
"elementName": "Image Formatter",
level:"1", parent:"2", isLeaf:true, expanded:false, loaded:true
},
{
"id": "2_3",
"elementName": "Anchor Formatter",
level:"1", parent:"2", isLeaf:true, expanded:false, loaded:true
}
]
}, grid;
grid = jQuery("#jsonmap");
grid.jqGrid({
datastr: topicjson,
datatype: "jsonstring",
height: "auto",
loadui: "disable",
colNames: ["id","Items","url"],
colModel: [
{name: "id",width:200, hidden:true, key:true},
{name: "elementName", editable:true,width:250, resizable: false},
{name: "url",width:200, editable:true,hidden:false}
],
treeGrid: true,
treeGridModel: "adjacency",
ExpandColumn: "elementName",
treeIcons: {leaf:'ui-icon-document-b'},
caption: "jqGrid Demos",
autowidth: true,
rowNum: 10000,
ExpandColClick: true,
jsonReader: {
repeatitems: false,
root: "response"
},
onSelectRow: function(id){
}
});
});
</script>
</head>
<body>
<table id="jsonmap" ></table>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My First Grid</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap.min14ed.css" />
<link rel="stylesheet" type="text/css" media="screen" href="jqgrid/ui.jqgridffe4.css" />
<style>
html, body {
margin: 0;
padding: 0;
font-size: 75%;
}
</style>
<script src="jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="jqgrid/i18n/grid.locale-cnffe4.js" type="text/javascript"></script>
<script src="jqgrid/jquery.jqGrid.minffe4.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$.jgrid.defaults.styleUI="Bootstrap";
var topicjson={
"response": [
{
"id": "1",
"elementName": "Grouping",
"url":"/asd/asda",
level:"0", parent:"", isLeaf:false, expanded:false, loaded:true
},
{
"id": "1_1",
"elementName": "Simple Grouping",
"url":"/asd/12",
level:"1", parent:"1", isLeaf:true, expanded:false, loaded:true
},
{
"id": "1_2",
"elementName": "May be some other grouping",
"url":"/asd/14342",
level:"1", parent:"1", isLeaf:true, expanded:false, loaded:true
},
{
"id": "2",
"elementName": "CustomFormater",
level:"0", parent:"", isLeaf:false, expanded:false, loaded:true
},
{
"id": "2_1",
"elementName": "Image Formatter",
level:"1", parent:"2", isLeaf:true, expanded:false, loaded:true
},
{
"id": "2_3",
"elementName": "Anchor Formatter",
level:"1", parent:"2", isLeaf:true, expanded:false, loaded:true
}
]
}, grid;
grid = jQuery("#jsonmap");
grid.jqGrid({
datastr: topicjson,
datatype: "jsonstring",
height: "auto",
loadui: "disable",
colNames: ["id","Items","url"],
colModel: [
{name: "id",width:200, hidden:true, key:true},
{name: "elementName", editable:true,width:250, resizable: false},
{name: "url",width:200, editable:true,hidden:false}
],
treeGrid: true,
treeGridModel: "adjacency",
ExpandColumn: "elementName",
treeIcons: {leaf:'ui-icon-document-b'},
caption: "jqGrid Demos",
autowidth: true,
rowNum: 10000,
ExpandColClick: true,
jsonReader: {
repeatitems: false,
root: "response"
},
onSelectRow: function(id){
}
});
});
</script>
</head>
<body>
<table id="jsonmap" ></table>
</body>
</html>