JqGrid treegrid 树形表格示例

treegrid树形表格,动态加载

1、HTML代码

<table id="one_grid"></table>

2、JS代码

jQuery("#one_grid").jqGrid({
		       url:'/test.action',
		       datatype: "json",
		       width:300,
		       treeGrid: true,  
		       treeGridModel: 'adjacency',  
		       ExpandColumn : 'name',
		       colNames:['id','节点名称','结束日期', '节点层级','备注'],
		       colModel:[
		      		{name:'id',index:'id', hidden:true},
		      		{name:'name',index:'name', width:200,sortable:false},
		      		{name:'endDate',index:'endDate', width:70,sortable:false},
		      		{name:'nodeLevel',index:'nodeLevel', width:100,sortable:false},
		      		{name:'remark',index:'remark', width:80,sortable:false}
		      	] ,
		      	pager: "false",
		        jsonReader: {  
		             root: "dataRows",  
		             repeatitems : false  
		        },  
		        treeReader : {  
		             level_field: "level",  
		             parent_id_field: "parent",  
		             leaf_field: "isLeaf",  
		             expanded_field: "expanded"  
		        },
		        sortorder: "desc",
		        height: '100%'
		      });

绿色字体的是与treegrid相关的配置


3、返回的数据示例:

[{"id":0,"name":"王三","level":0,"endDate":"2017-03-07","isLeaf":false,"nodeLevel":20,"expanded":true,"remark":"123"},

 {"id":1,"name":"王三","level":1,"endDate":"2017-03-07","isLeaf":false,"nodeLevel":21,"parent":0,"expanded":true,"remark":"123"},

 {"id":2,"name":"王三","level":2,"endDate":"2017-03-07","isLeaf":true,"nodeLevel":22,"parent":1,"expanded":true,"remark":"123"}]

绿色字体是与treegrid相关的属性


效果(备注列没有截取在图中)




  • 4
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 7
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值