文档章节

jqGrid treegrid配置

j
 jason_wu_2
发布于 2016/12/06 17:56
字数 1420
阅读 152
收藏 2
点赞 0
评论 0

树形表格用于显示在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
粉丝 4
博文 133
码字总数 2988
作品 0
jqgrid怎么一次提交可编辑表格修改好的所有数据啊?比如有没有编辑后操作的那种属性,知道的告知一下谢谢,第一次用,不懂

如题所示,需要用到一个按钮把jqgrid的所有修改的数据传入到后台,知道的告知一下,万分感谢

那一夜下雨了 ⋅ 05/30 ⋅ 0

简单灵活的 Java CMS - EasyCms

简介 Java EasyCms 使用最简单性能最高的框架,将cms系统简单到极致,灵活的栏目扩展,快速的构建普通网站 生成的静态演示站(测试): www.j4cms.com 用到的框架工具 java,servlet,guice...

姜小北 ⋅ 2017/08/02 ⋅ 0

共享定制云平台 - AWCP

AWCP 是一个共享定制云平台,集成了 jflow 工作流引擎,并完成了基于钉钉的开发框架自动生成,可快速搭建基于钉钉管理系统。完成了钉钉端页面配置管理,审核审批,完成了钉钉 PC 端页面配置管...

曹勇 ⋅ 2017/10/23 ⋅ 9

求助大神、jqGrid问题

$("#tbl_aa").jqGrid({url : 'aaa.php',mtype : 'POST',postData : {id : "aaa",qa_func : "show",},datatype : "json",colNames : aa.colNames,colModel : aa.colModel,rowNum : 30,rowList......

Barb1eQ ⋅ 2013/01/22 ⋅ 1

jqGrid 展示问题

@蓝水晶飞机 你好,想跟你请教个问题: jgGrid treeGrid 加载完成后展示的是全部数据,模式展开,点击收缩的按钮会把子节点的数据在加到已有的数据下面,不是关掉子节点。 js $(document).r...

zppiio ⋅ 2016/03/25 ⋅ 0

jqgrid设置单行背景色之后鼠标滑过时又变成了白色

$('#'+id).find("td").addClass("SelectBG");//设置背景色 这种方式设置了背景色但是鼠标滑过的时候会变成白色, 能不能不让它变化了,,求大神 怎么改变它原来的鼠标悬停事件...

晓梦随风 ⋅ 05/04 ⋅ 0

求助jqgrid的treegrid的编辑插入

看见这个treegrid老上火了,看了一天也没解决这个问题 问题是怎么编辑完成,或者插入完成之后让table那个表格不整体刷新,只是新加一行或者更新下修改的那部分

北落 ⋅ 2011/11/01 ⋅ 2

jqGrid 各种参数 详解

JQGrid是一个在jquery基础上做的一个表格控件,以ajax的方式和服务器端通信。 JQGrid Demo 是一个在线的演示项目。在这里,可以知道jqgrid可以做什么事情。 下面是转自其他人blog的一个学习资...

jason_wu_2 ⋅ 2016/11/09 ⋅ 0

S2JH:基于jqGrid集成扩展的表格Grid组件功能

作为 S2JH: 基于SSH的企业Web应用开发框架 提供相关技术点介绍系列,一方面算是给出自己对某一个特定问题的设计实现思路分享供有兴趣朋友参考,另一方面也算是与大家一起探讨汲取各位同行更多...

xautlx ⋅ 2013/10/12 ⋅ 2

jqGrid 详解大全

jqGrid 各种参数 详解 JQGrid JQGrid是一个在jquery基础上做的一个表格控件,以ajax的方式和服务器端通信。 JQGrid Demo 是一个在线的演示项目。在这里,可以知道jqgrid可以做什么事情。 jq...

waterstar50 ⋅ 2017/09/15 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

行政区划代码转为字典形式

原数据为: http://www.mca.gov.cn/article/sj/xzqh/2018/201804-12/201804-06041553.html 手动替换了一下格式,并使用下面的代码处理. # 输入格式s = """110000:北京市110101:东城区1101...

漫步海边小路 ⋅ 16分钟前 ⋅ 0

android apk 签名

创建key,需要用到keytool.exe (位于C:\Program Files\Java\jdk1.6.0_10\bin目录下),使用产生的key对apk签名用到的是jarsigner.exe (位于C:\Program Files\Java\jdk1.6.0_10\bin目录下),把...

国仔饼 ⋅ 25分钟前 ⋅ 0

springcloud+jps+mybatis多数据库配置

多数据库配置 配置我们目录结构设置: config ---datasource ----jpa ----mybatis ----redis Datasource中是数据的相关配置 Jap中是springDatajpa的相关配置 Mybatis中是mybatis的相关配置 ...

大-智-若-愚 ⋅ 32分钟前 ⋅ 0

Spring mvc HandlerMapping 实现机制

概述 当DispatcherServlet接受到客户端的请求后,SpringMVC 通过 HandlerMapping 找到请求的Controller。 HandlerMapping 在这里起到路由的作用,负责找到请求的Controller。 Spring MVC 默认...

轨迹_ ⋅ 36分钟前 ⋅ 0

JavaScript零基础入门——(十)JavaScript的DOM基础

JavaScript零基础入门——(十)JavaScript的DOM基础 欢迎大家回到我们的JavaScript零基础入门,上一节课,我们了解了JavaScript中的函数,这一节课,我们来了解一下JavaScript的DOM。 第一节...

JandenMa ⋅ 今天 ⋅ 0

Weex起步

本教程假设你已经在你的本地环境安装了node 其实weex起步教程在 https://github.com/lilugirl/incubator-weex 项目说明文件中都已经有了,但为了有些同学看到英文秒变文盲,所以这里我重新写...

lilugirl ⋅ 今天 ⋅ 0

Jenkins实践1 之安装

1 下载 http://mirrors.jenkins.io/war/latest/jenkins.war 2 启动 java -jar jenkins.war 前提:安装jdk并配置环境变量 启动结果节选: ************************************************......

晨猫 ⋅ 今天 ⋅ 0

组合数学 1-2000 中,能被6或10整除的数的个数

1--2000 中,能被6或10整除的数的个数 利用集合的性质 能被6整除的个数 2000/6 = 333 能被10整除的个数 2000/10 = 200 能被6和10整除的个数 2000/30 = 66 能被6或10整除的个数 333+200-66 =...

阿豪boy ⋅ 今天 ⋅ 0

一篇文章学懂Shell脚本

Shell脚本,就是利用Shell的命令解释的功能,对一个纯文本的文件进行解析,然后执行这些功能,也可以说Shell脚本就是一系列命令的集合。 Shell可以直接使用在win/Unix/Linux上面,并且可以调用...

Jake_xun ⋅ 今天 ⋅ 0

大数据工程师需要精通算法吗,要达到一个什么程度呢?

机器学习是人工智能的一个重要分支,而机器学习下最重要的就是算法,本文讲述归纳了入门级的几个机器学习算法,加大数据学习群:716581014一起加入AI技术大本营。 1、监督学习算法 这个算法由...

董黎明 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部