jqgridTree

<!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>    
阅读更多
文章标签: jqgrid jqgridtree demo
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭