jqgridTree

原创 2018年04月17日 15:14:06
<!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 treegrid使用实例下载

  • 2011年04月15日 21:48
  • 31KB
  • 下载

jqGrid的treegrid的bug修复

刚开始使用jqGrid,就碰到了难题。想把列表做成树形的treegrid,在网上查了下jqgrid也正好有这个方法,但是使用的过程中发现个问题,就是传入的数据顺序如果不是一棵树一棵树的排列好的,就会出...
  • qq805911956
  • qq805911956
  • 2016-04-27 16:58:23
  • 1473

juery GridTree表格树

地址:http://www.iteye.com/topic/631822   点击打开链接 jQuery 2011年01月24号最新表格树已经发布了:http://renj...
  • angle860123
  • angle860123
  • 2012-07-19 21:46:19
  • 6090

jqgrid treegrid功能的bug修改

  • 2016年05月10日 16:13
  • 753KB
  • 下载

jqGrid treeGrid初始化显示时为什么不能设置成收缩?

jqGrid treeGrid初始化显示时为什么不能设置成收缩?
  • IamOceanKing
  • IamOceanKing
  • 2016-12-14 19:30:57
  • 659

jqGrid 树形表格多选

使用了jqGrid的treeGrid做数据展示,使用中有对树形的数据多选的需求,需要选择一个节点,同时选择其所有子节点;查看了API,发现treeGrid不支持,还是自己动手来完成...
  • zrk1000
  • zrk1000
  • 2015-07-15 10:23:44
  • 4213

JqGrid学习总结_9树形表格TreeGrid

1、树形表格TreeGrid官网:        http://www.trirand.com/jqgridwiki/doku.php?id=wiki:treegrid 2、从后台获取数据显示为树形表...
  • luguling200802544
  • luguling200802544
  • 2015-06-10 09:48:40
  • 5563

JQGrid各种参数详解API

jqGrid皮肤 从3.5版本开始,jqGrid完全支持jquery UI的theme。我们可以从http://jqueryui.com/themeroller/下载我们所需要的theme。当然,你也...
  • lionel1982
  • lionel1982
  • 2016-01-19 22:42:31
  • 6975

jqgrid——treegrid动态异步加载数据

jqgrid的treegrid插件,有两种数据结构: 1、
  • liuxiao723846
  • liuxiao723846
  • 2014-11-11 17:10:37
  • 11489

JqGrid treegrid 树形表格示例

treegrid树形表格,动态加载 1、HTML代码 2、JS代码 jQuery("#one_grid").jqGrid({ url:'/test.action', ...
  • zhangfeng2124
  • zhangfeng2124
  • 2017-03-07 17:21:05
  • 11387
收藏助手
不良信息举报
您举报文章:jqgridTree
举报原因:
原因补充:

(最多只允许输入30个字)