文档章节

jqGrid treegrid配置

j
 jason_wu_2
发布于 2016/12/06 17:56
字数 1420
阅读 242
收藏 2

树形表格用于显示在jqGrid中显示分层数据。树形表格支持嵌套集合模型( Nested Set model )邻接模型(Adjacency model)。描述嵌套集合模型的相关文章推荐

安装

  要使用这个方法,需要在下载页面勾选Treegrid后再下载jqGrid,下载地址:http://www.trirand.com/blog/?page_id=6。源文件grid.treegrid.js在src目录中。

再使用属性表格之前,强烈建议先阅读本文内容和相关分层数据显示的文章。

Options

下面为在jqGrid中配置的选项,用于配置树形表格

Option Type Description Default
ExpandColClick boolean 设置为true,点击行时将会展开/收缩属性表格,而不仅限于点击图标 true
ExpandColumn string 指定哪列(colModel中的name配置值)用于展开属性表格。不设置则默认第一列,treeGrid配置为true时有效 null
treedatatype mixed 定义初始化数据类型(参考:datatype),一般不需要配置,使用配置的datatype属性 null
treeGrid boolean 是否启用树形表格 false
treeGridModel string 决定树形表格可使用的方法,可用值有nested 或者adjacency. nested
treeIcons array 设置属性表格使用的图标,需要为UI主题中定义的有效值图像。默认值为: {plus:'ui-icon-triangle-1-e',minus:'ui-icon-triangle-1-s',leaf:'ui-icon-radio-off'}  
treeReader array 扩展父表格定义的colModel。这里定义的字段添加到colModel最后并且是隐藏的,所以需要服务器返回的数据中也要包含这里定义的字段。查看下面获取有哪些可用值  
tree_root_level numeric 定义根元素开始的层次。(Determines the level where the root element begins when treeGrid is enabled) 0

如果jqGrid配置了gridview为true,树形表格不会被构造。(If the gridview option in the grid is set to true the treeGrid will not be constructed instead that set to true.)(不太明白这句表达什么)

  treeReader动态的想colModel中添加列(treeGrid要设置为true)

-收缩JavaScript代码

treeReader : {
   property1 : value1
   ...
   propertyN : valueN
}

  treeReader依据treeGridModel的值,想colModel中添加不同的列,既不同的方法需要有不同的配置,参考: Nested Set Model and Adjacency Model。当前的jqGrid只能从服务器加载数据。下面介绍一些技巧如何使用本地数据(local data)。

需要特别注意,从服务器返回的数据需要以适当的方式排序过,例如

-收缩SQL代码

SELECT category_name, level, lft, rgt FROM categories ORDER BY lft;

 Tree Grid

方法

下面的方法中,record代表当前记录,通过getInd方法获取

-收缩JavaScript代码

var record = jQuery("#grid_id").getInd(rowid,true);

备注:3.7.x+版本不在使用此方法,改用var record = jQuery(”#grid_id”).getRowData(rowid);来替代

  • rowid为数据行id。
  • 注意此方法第二个参,设置为false(默认)或者未传递,返回值为行的索引( returned value is the index of the row)。设置为true返回DOM对象(TR,是否被jQuery包装过没测试),找不到对应的行返回false。
方法名称 参数 描述
addChildNode nodeid, parentid, data 参考parentid值向树中添加节点。nodeid为数据行中唯一值。如果设置为空字符串,此方法从数据中获取下一个最大数值+1(If set to empty string the method gets the next max number + 1 from the data)。如果parentid为null,增加的节点作为根节点。parentid为当前显示某数据行的id,参数data将添加到这行作为子元素。data为需要插入的数据(Data is a data to be inserted.)
collapseNode record 收缩指定记录的节点。(Collapse the node at specified record)
collapseRow record 收缩指定记录(的树形表格)(Collapse the current row)
delTreeNode rowid 删除rowid指定节点及所有子节点,rowid为数据行id。此方法不会从服务器上删除节点
expandNode record 展开指定记录节点
expandRow record 展开指定记录(的树形表格)Expand the current row
getNodeAncestors record 以数组形式返回指定记录的所有祖先
getNodeParent record 返回指定记录的父节点
getNodeChildren record 以数组形式返回指定个记录的子节点,没有子节点返回空数组
getRootNodes none 以数组形式返回当前根节点
isNodeLoaded record 判断指定记录节点是否已经加载(返回true表示已经加载)
isVisibleNode record 返回true/false指示指定记录节点是否可见
setTreeRow rowid, data setRowData一样
SortTree direction 为1(升序)或者-1(降序)。通过sortname(jqGrid中的配置)对树排序

注意事项和限制

  • 目前不支持通过addRowData添加节点

  • 目前不建议使用树形表格时联合使用行编辑和表单编辑,否则展开的列不可编辑

  • 目前不支持(一次?)添加多个节点

  • Pager 功能在使用树形控件时被禁用

  • 父表格初始化读取数据后,datatype配置自动变为local。因为树形表格支持自动加载树节点。就是说,为了速度或者效率,你可以首先只加载根节点,当点击展开需要展开子节点时才加载子节点数据。父表格是否存在子节点数据,不存在才从服务器加载,因此当请求服务器时需要传递附加参数。设置datatype为local,是为了干预在发送的请求前,正确创建请求(Setting datatype to local permits intervening before the request is made to build the request correctly)。查看嵌套集合模型( Nested Set model )和 邻接模型(Adjacency model)了解什么内容将提交到服务器。

 

来源:http://www.trirand.com/jqgridwiki/doku.php?id=wiki:treegrid

本文转载自:http://www.w3dev.cn/article/20130709/jqGrid-treegrid-config.aspx

共有 人打赏支持
j
粉丝 5
博文 134
码字总数 2988
作品 0
私信 提问
求助大神、jqGrid问题

jqGrid中的 treegrid 和 subgrid 怎么能结合起来用? treegrid中的treeicon 怎样能作为 subgrid中的plusicon? 这样 subgrid就不生效、如果把treegrid的属性注释掉,subgrid就生效了、怎样能用...

Barb1eQ
2013/01/22
721
1
jfinal与jqgrid结合实例。

直接上代码: index.html <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Insert title here</title> </head> <body> <link rel="stylesheet" ......

控制自己
2013/01/05
0
8
解决jqGrid新增或编辑记录保存成功但提示错误的问题

在上一篇文章《》中,我们详细说明了一下如何创建一个可以使用增删改操作的jqGrid。 但是在实际的修改、新增保存中,会看到如下的错误提示:error Status:"OK".Error code: 900。实际上,修改...

yonge
2009/12/14
5.8K
1
jQuery表格插件jqgrid加载数据的问题

最近的项目使用jqgrid来显示数据, 遇到个问题, 需求:页面初始化时表格是空的,只要显示列明就好,这个通过不指定url实现了。 加载数据是跟用用户输入到DB查询,返回数据集。尝试手动将数据...

jay_
2012/01/20
3.7K
1
关于dwz使用过程中的3个问题,新手勿拍

@张慧华 你好,想跟你请教个问题: 1.如何查看当前的dwz版本是多少?在哪看? 2.为什么我每次从leftside点击链接的时候,都要点两下?第一次是把链接加载到navTab,但是却没有内容显示,第二...

Snakecn21
2012/11/16
8K
13

没有更多内容

加载失败,请刷新页面

加载更多

如何解决 homebrew 更新慢的问题

之前一直困扰于 Homebrew 的更新速度,曾试过修改更新源(清华、中科大等)的方式,但是并没什么卵用;也试过设置 curl 代理的方式,但是 brew 走的好像不是 curl 的方式,所以也没用。 通过...

whoru
11分钟前
0
0
TiDB EcoSystem Tools 原理解读系列(二)TiDB-Lightning Toolset 介绍

简介 TiDB-Lightning Toolset 是一套快速全量导入 SQL dump 文件到 TiDB 集群的工具集,自 2.1.0 版本起随 TiDB 发布,速度可达到传统执行 SQL 导入方式的至少 3 倍、大约每小时 100 GB,适合...

TiDB
13分钟前
0
0
【Visual Studio 扩展工具】如何在ComponentOneFlexGrid树中显示RadioButton

概述 在ComponentOne Enterprise .NET控件集中,FlexGrid表格控件是用户使用频率最高的控件之一。它是一个功能强大的数据管理工具,轻盈且灵动,以分层的形式展示数据(数据呈现更加直观)。...

葡萄城技术团队
15分钟前
0
0
Maven环境隔离

Maven环境隔离 1. 什么是Maven环境隔离 顾名思义,Maven环境隔离就是将开发中的环境与beat环境、生产环境分隔开,方便进行开发和维护。这个在实际项目中用的还是很多的,如果你的项目用的Mav...

蚂蚁-Declan
15分钟前
1
0
day182-2018-12-19-英语流利阅读-待学习

“性感”时代已去,维密将如何转身? Daniel 2018-12-19 1.今日导读 维多利亚的秘密(Victoria's Secret)这个内衣品牌,最近似乎步入了“中年危机”——曾经打遍天下的“性感”内衣,在主打...

飞鱼说编程
15分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部