pyzheng
- 浏览: 3430440 次
- 性别:
- 来自: 珠海
-
文章分类
- 全部博客 (1633)
- Java (250)
- Android&HTML5 (111)
- Struts (10)
- Spring (236)
- Hibernate&MyBatis (115)
- SSH (49)
- jQuery插件收集 (55)
- Javascript (145)
- PHP (77)
- REST&WebService (18)
- BIRT (27)
- .NET (7)
- Database (105)
- 设计模式 (16)
- 自动化和测试 (19)
- Maven&Ant (43)
- 工作流 (36)
- 开源应用 (156)
- 其他 (16)
- 前台&美工 (119)
- 工作积累 (0)
- OS&Docker (83)
- Python&爬虫 (28)
- 工具软件 (157)
- 问题收集 (61)
- OFbiz (6)
- noSQL (12)
最新评论
-
HEZR曾嶸：
你好博主，这个不是很理解，能解释一下嘛//左边+1,上边+1, ...
java 两字符串相似度计算算法 -
天使建站：
写得不错，可以看这里，和这里的这篇文章一起看，有 ...
jquery 遍历对象、数组、集合 -
xue88ming：
很有用，谢谢
@PathVariable映射出现错误: Name for argument type -
jnjeC：
厉害，困扰了我很久
MyBatis排序时使用order by 动态参数时需要注意，用$而不是# -
TopLongMan：
非常好，很实用啊。。
PostgreSQL递归查询实现树状结构查询
jqGrid实现树状Grid http://blog.csdn.net/axzywan/article/details/7384036
JQgrid tree 终于有数据了 http://www.cnblogs.com/Mr-Joe/archive/2012/03/20/2407958.html
官方文档: http://www.trirand.com/jqgridwiki/doku.php?id=wiki:treegrid
问题和注意：
1. 如果grid的参数存在"rownumbers": true, "rownumWidth": 20,那么无法在正确的位置显示ExpandColumn信息，他会显示在ExpandColumn的前一列。所以应该动态计算并放到下一列。可能会引起setTreeRow方法的错误，因为这个方法是使用真实的ExpandColumn。
2. jsonReader: {
root: "dataRows", //设定这个参数，有时候也无法正常现实
repeatitems : false //不需要再去后台刷新，否则可能有问题，所以最好第一次就加载所有数据
}
3. gridview， boolean 设置为true将提高5~10倍的显示速度。但不能再使用treeGrid, subGrid, 或afterInsertRow事件
4. 如果getNodeParent方法无效，可能是因为你给的recorddata.parentId的类型不对，这里需要recorddata.parentId是字符串，才能找到的.
5. collapseNode和collapseRow，expandNode和expandRow一般是成对调用。
6. 移动一个节点以及它的子节点。要字节加方法，才能实现,其实它至此的treegrid功能很弱，一些东西要自己实现，后面附加一些自己实现的方法
第一个列子
/pages/demo/tree.json
----------------------------------
第二个例子
一些自己实现的方法
JQgrid tree 终于有数据了 http://www.cnblogs.com/Mr-Joe/archive/2012/03/20/2407958.html
官方文档: http://www.trirand.com/jqgridwiki/doku.php?id=wiki:treegrid
问题和注意：
1. 如果grid的参数存在"rownumbers": true, "rownumWidth": 20,那么无法在正确的位置显示ExpandColumn信息，他会显示在ExpandColumn的前一列。所以应该动态计算并放到下一列。可能会引起setTreeRow方法的错误，因为这个方法是使用真实的ExpandColumn。
2. jsonReader: {
root: "dataRows", //设定这个参数，有时候也无法正常现实
repeatitems : false //不需要再去后台刷新，否则可能有问题，所以最好第一次就加载所有数据
}
3. gridview， boolean 设置为true将提高5~10倍的显示速度。但不能再使用treeGrid, subGrid, 或afterInsertRow事件
4. 如果getNodeParent方法无效，可能是因为你给的recorddata.parentId的类型不对，这里需要recorddata.parentId是字符串，才能找到的.
5. collapseNode和collapseRow，expandNode和expandRow一般是成对调用。
6. 移动一个节点以及它的子节点。要字节加方法，才能实现,其实它至此的treegrid功能很弱，一些东西要自己实现，后面附加一些自己实现的方法
第一个列子
/pages/demo/tree.json
----------------------------------
{
"total":11,
"page":1,
"records":11,
"rows":[
{"id":1, "name":"Pandy1", "cell":["第一级1",0,null,false,false]},
{"id":3, "name":"Pandy2", "cell":["第二级1",1,1,true,false]},
{"id":2, "name":"Pandy3", "cell":["第一级2",0,null,true,false]}
]
}
<%@ page language="java" contentType="text/html;charset=utf-8" pageEncoding="utf-8" %>
<%@ include file="/common/taglibs.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Insert title here</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="<c:url value="/pages/org/grid.treegrid.js"/>"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#treegrid").jqGrid({
treeGrid: true,
treeGridModel: 'adjacency',
ExpandColumn: 'name',
ExpandColClick: true,
url: '/pages/demo/tree.json',
datatype: 'json',
colNames: ["管理选项"],
colModel: [
{ name: 'name', index: 'name' }
],
pager: "false",
height: 'auto',
width: '210',
viewrecords: true,
// caption: 'none',
jsonReader: {
root: "rows",
total: "total",
repeatitems: true
}
});
})
;
</script>
</head>
<body>
<table id="treegrid"></table>
<div id="ptreegrid"></div>
</body>
</html>
第二个例子
[
{"id":0,"username":"王三1","level":0,"address":"USA","isLeaf":false,"age":20,"expanded":true,"password":"123"},
{"id":1,"username":"王三2","level":1,"address":"USA","isLeaf":false,"age":21,"parent":0,"expanded":true,"password":"123"},
{"id":2,"username":"王三3","level":2,"address":"USA","isLeaf":true,"age":22,"parent":1,"expanded":true,"password":"123"}
]
<%@ page language="java" contentType="text/html;charset=utf-8" pageEncoding="utf-8" %>
<%@ include file="/common/taglibs.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Insert title here</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="<c:url value="/pages/org/grid.treegrid.js"/>"></script>
<script type="text/javascript">
$(document).ready(function(){
jQuery("#treegrid").jqGrid({
treeGrid: true,
treeGridModel: 'adjacency', //treeGrid模式，跟json元数据有关 ,adjacency/nested
ExpandColumn : 'username',
scroll: "true",
url: '/pages/demo/tree1.json',
datatype: 'json',
colNames:['编号','姓名','密码','年龄','地址','出生日期'],
colModel:[
{name:'id',index:'id', width:90,sorttype:"int"},
{name:'username',index:'username', width:110,sorttype:"int"},
{name:'password',index:'password', width:80},
{name:'age',index:'age', width:80},
{name:'address',index:'address', width:80},
{name:'time',index:'time', width:80,sorttype:"date"}
],
pager: "false",
sortname: 'id',
sortorder: "desc",
jsonReader: {
root: "dataRows",
repeatitems : false
},
treeReader : {
level_field: "level",
parent_id_field: "parent",
leaf_field: "isLeaf",
expanded_field: "expanded"
},
caption: "jqGrid test",
mtype: "POST",
height: "auto", // 设为具体数值则会根据实际记录数出现垂直滚动条
rowNum : "-1", // 显示全部记录
shrinkToFit:false // 控制水平滚动条
});
});
</script>
</head>
<body>
<table id="treegrid"></table>
</body>
</html>
一些自己实现的方法
/* 以下是常用的方法 */
/**
* 设定默认关闭的等级，同时自动关闭它的下一级
* 这里递归，出现错误
* @param GridConfig
* @param level
*/
/* --------------------------- tree grid for jqGrid ------------------------------- */
setDefaultOpenLevel: function (GridConfig, level) {
var childRows = $("#" + GridConfig.divId).jqGrid('getRootNodes');
for (var i = 0; i < childRows.length; i++) {
var rows = $("#" + GridConfig.divId).jqGrid('getNodeChildren', childRows[0]);
for (var m = 0; m < rows.length; m++) {
if (rows[m].level <= level) {
$("#" + GridConfig.divId).jqGrid('collapseNode', rows[m]);
$("#" + GridConfig.divId).jqGrid('collapseRow', rows[m]);
}
//遍历导致浏览器崩溃，所以多做一次循环，进入深一层继续关闭就好.
var trows = $("#" + GridConfig.divId).jqGrid('getNodeChildren', rows[m]);
for (var k = 0; k < trows.length; k++) {
if (trows[k].level <= (level + 1)) {
$("#" + GridConfig.divId).jqGrid('collapseNode', trows[k]);
$("#" + GridConfig.divId).jqGrid('collapseRow', trows[k]);
}
}
}
}
},
/**
* 展开某个节点的所有父节点
* @param GridConfig
* @param id
*/
openParentsNode: function (GridConfig, rowid) {
var currNode = $.GridUtils.getCurrentNode(GridConfig, rowid);
currNode.parentId=""+currNode.parentId;
var parent = $("#" + GridConfig.divId).jqGrid('getNodeParent', currNode);
if (parent != null) {
$("#" + GridConfig.divId).jqGrid('expandNode', parent);
$("#" + GridConfig.divId).jqGrid('expandRow', parent);
$.GridUtils.openParentsNode(GridConfig, parent.id);
}
},
getAllChildrenNodes: function (GridConfig, root, level, treeList) {
if (typeof treeList == "undefined") {
treeList = [];
}
var chs = $("#" + GridConfig.divId).jqGrid('getNodeChildren', root);
treeList[treeList.length] = root;
if (chs != null && chs.length > 0) {
for (var i = 0; i < chs.length; i++) {
$.GridUtils.getAllChildrenNodes(GridConfig, chs[i], level + 1, treeList);
}
}
return treeList;
},
/**
* 自己实现获得父节点方法
* @param GridConfig
* @param rowid
* @returns {*}
*/
getNodeParent: function (GridConfig, rowid) {
var roots = $("#" + GridConfig.divId).jqGrid('getRootNodes');
var row = $.GridUtils.getRowData(GridConfig, rowid);
for (var i = 0; i < roots.length; i++) {
var treeList = $.GridUtils.getAllChildrenNodes(GridConfig, roots[i], 0);
for (j = 0; j < treeList.length; j++) {
if (treeList[j].id == row.parentId) {
return treeList[j]
}
}
}
return null;
},
/**
* 自己实现获得当前节点方法
* @param GridConfig
* @param rowid
* @returns {*}
*/
getCurrentNode: function (GridConfig, rowid) {
var roots = $("#" + GridConfig.divId).jqGrid('getRootNodes');
var row = $.GridUtils.getRowData(GridConfig, rowid);
for (var i = 0; i < roots.length; i++) {
var treeList = $.GridUtils.getAllChildrenNodes(GridConfig, roots[i], 0);
for (j = 0; j < treeList.length; j++) {
if (treeList[j].id == row.id) {
return treeList[j]
}
}
}
return null;
},
/**
* 第一个节点是当前节点，第二个以及后面的，属于它的子节点
* @param GridConfig
* @param rowid
* @returns {*}
*/
getAllChildrenNodesByRowId: function (GridConfig, rowid) {
var row = $.GridUtils.getRowData(GridConfig, rowid);
row._id_ = row.id;
var rowList = $.GridUtils.getAllChildrenNodes(GridConfig, row, row.level);
if (rowList == null || rowList.length == 0)
return rowList;
if (rowList != null && rowList.length > 0) {
//替换当前节点
rowList[0] = $.GridUtils.getCurrentNode(GridConfig, rowid);
}
return rowList;
},
/**
* 自己实现的删除节点以及子节点,注意，先从叶子删除
* @param GridConfig
* @param rowid
*/
deleteTreeNodeAndChildren: function (GridConfig, rowid) {
var treeList = $.GridUtils.getAllChildrenNodesByRowId(GridConfig, rowid);
//先删除子节点再删除当前节点
for (var i = treeList.length - 1; i >= 0; i--) {
if (treeList[i] != null)
$("#" + GridConfig.divId).jqGrid('delTreeNode', treeList[i].id);
}
},
/**
* 移动一个节点到另一个节点
* @param GridConfig
* @param newNodeData
*/
moveTreeNode: function (GridConfig, newNodeData) {
if (typeof(newNodeData.parentId) == "undefined") {
alert("没有设定父节点ID");
return;
}
var levelPad = 0; //用于校对心节点的level
var rowid = typeof(newNodeData.rowid) == "undefined" ? newNodeData.id : newNodeData.rowid;
var newParentId = newNodeData.parentId;
var newParent;
var oldParent;
//获得之前的当前节点以及所有子节点
var treeList = $.GridUtils.getAllChildrenNodesByRowId(GridConfig, rowid);
//alert("treeList=" + $.toJSON(treeList));
if (treeList != null && treeList.length > 0) {
newParent = $.GridUtils.getCurrentNode(GridConfig, newParentId);
oldParent = $.GridUtils.getCurrentNode(GridConfig, treeList[0].parentId);
//新旧的父节点的level差量
if (newParent != null) {
//levelPad = newParent.level - treeList[0].level;
levelPad = newParent.level - oldParent.level;
}
//alert("newParent="+ $.toJSON(newParent));
//alert("oldParent="+ $.toJSON(oldParent));
//alert("levelPad="+ levelPad);
}
//删除当前节点以及所有子节点
$.GridUtils.deleteTreeNodeAndChildren(GridConfig, rowid);
//alert("deleteTreeNodeAndChildren");
//更新当前节点的业务信息
treeList[0] = $.extend(treeList[0], newNodeData);
for (var i = 0; i < treeList.length; i++) {
treeList[i]._id_ = treeList[i].id;
treeList[i].loaded = true;
//新旧的父节点的level差量 + 1,就是当前节点应该的level
treeList[i].level = treeList[i].level + levelPad;
//alert("treeList[i]=" + $.toJSON(treeList[i]));
$("#" + GridConfig.divId).jqGrid('addChildNode', treeList[i].id, treeList[i].parentId, treeList[i]);
}
$.GridUtils.openParentsNode(GridConfig, treeList[0].id);
//return;
//旧的父节点不存在子节点的时候，无法隐藏图标，另求其他方法
//重新检查旧的父节点，当旧的父节点已经不存在子节点的时候，应该重新读取，删除，再加入，保证图标隐藏。
treeList = $.GridUtils.getAllChildrenNodesByRowId(GridConfig, oldParent.id);
if (treeList != null && treeList.length == 1) {
$.GridUtils.deleteTreeNodeAndChildren(GridConfig, treeList[0].id);
treeList[0]._id_ = oldParent.id;
treeList[0].loaded = true;
treeList[0].isLeaf = true;
//alert("treeList[0]=" + $.toJSON(treeList[0]));
$("#" + GridConfig.divId).jqGrid('addChildNode', treeList[0].id, treeList[0].parentId, treeList[0]);
}
}
分享到：
发表评论
-
echart使用记录
2016-06-22 09:24 1815ECharts详细说明 http://elang0705.it ... -
jqGrid的搜索框下拉
2016-06-06 09:21 2798http://www.cnblogs.com/linguogu ... -
pageSwitch-支持121种过渡效果的JavaScript页面切换插件
2016-04-10 01:25 1614介绍： http://www.htmleaf.com/jQue ... -
基于jQuery的监控表单元素变化的小插件
2016-03-28 13:24 1711http://www.easyui.info/archives ... -
巧用 jQuery 筛选器，避免重复代码
2016-03-25 23:01 1519http://my.oschina.net/mays/blog ... -
zepto(移动简化版jQuery)，的 API 分类
2016-03-24 09:22 1738http://my.oschina.net/leejun200 ... -
PJAX的实现与应用
2016-03-22 13:18 1058http://www.cnblogs.com/hustskyk ... -
html上传图片之前在网页预览实现
2016-03-16 10:40 1045HTML5之FileReader的使用 http://blog ... -
Jquery获取窗口高度
2016-03-15 12:48 966http://my.oschina.net/moks/blog ... -
通过Scroller.js制作上拉加载和下拉刷新
2016-03-08 13:49 1876http://my.oschina.net/wolfx/blo ... -
jQuery动画插件： Velocity.js
2016-02-16 13:46 1274官方： http://julian.com/research/ ... -
jquery.cityselect.js基于jQuery+JSON的省市或自定义联动效果
2016-01-05 21:06 1450http://www.ijquery.cn/?p=360 -
js函数式编程: nderscore.js
2015-12-22 11:07 1089nderscore.js是一个 JavaScript 工具库， ... -
jquery.fly.min.js 拋物插件
2015-12-17 10:03 3593插件官方: https://github.com/amibug ... -
jquery读取表单数据: serializeArray & serializeObject
2015-12-14 16:36 1279$.fn.serializeObject = function ... -
JavaScript 文件拖拽上传插件 dropzone.js 介绍
2015-12-04 23:12 1841JavaScript 文件拖拽上传插件 dropzone.js ... -
Jquery contentMenu右键菜单 当某个事件出发时才显示菜单
2015-10-28 13:49 1585http://my.oschina.net/u/780876/ ... -
taitems/jQuery.Gantt源码修改
2015-07-01 17:09 35931. 解决了不对齐 2. 增加process进度条 使用方式 ... -
plupload上传插件在SpringMVC中的整合
2015-06-02 13:42 2403插件地址： http://www.plupload.com/ ... -
使用jquery.i18n.properties.js实现js国际化
2015-05-31 15:09 4053http://my.oschina.net/u/871551/ ...
相关推荐
jqGrid允许将数据组织成树状结构，通过配置`treeGrid: true`开启树形模式。每一行数据都可以有父节点和子节点，通过`parent`字段指定父节点ID，而`id`字段作为唯一标识。`ExpandColumn`则定义了用于展开/折叠节点的...
- **TreeGrid（树形网格）**：jqGrid的5.3.1版本包含了TreeGrid功能，允许以树状结构展示数据，这对于层级关系复杂的数据尤为适用，用户可以展开或折叠节点，查看层次关系。 - **编辑功能**：提供了行内编辑、弹出...
**jqGrid TreeGrid 详解** jqGrid 是一个强大的 ...通过理解其配置选项、动态操作方法以及事件处理，开发者可以创建出符合业务需求的交互式树形表格。在实际项目中，可以根据具体场景灵活调整参数，实现定制化功能。
可先参考下我的博客：http://blog.csdn.net/qq805911956/article/details/51262506
在处理复杂的数据展示时，树形表格是一种常见的需求，它能够以层次结构来展示数据，使得数据的组织更为清晰。本教程将详细介绍如何基于Vue.js实现一个自定义的树形表格组件——vue-tree-table。 首先，我们需要了解...
实现一个树形表格的时候有多种方法：比如把 ztree 的树形直接拼接成表格，或者用强大的 jqgrid 实现，今天介绍一个比较轻量级的实现：使用bootstrap-table + treegrid 。 1、引入 jquery.js、bootstrap-table.js、...
TreeGrid树状表格是一种特殊的表格展示方式，它将数据以树形结构呈现，适用于处理具有层级关系的数据。这种表格能够帮助用户更清晰地理解和操作层次化的信息，常用于项目管理、组织架构、文件目录等场景。 在...
9. **插件扩展**：jqGrid有丰富的插件系统，如`subgrid`用于嵌套表格，`treegrid`实现树形结构，`navigator`提供额外的操作按钮等。在`plugins`目录下的文件即为这些插件的实现。 10. **版本更新与社区支持**：...
* treeGrid：设置表格的树形网格。 * treeGridModel：设置表格的树形网格模型。 * viewrecords：设置表格的查看记录功能。 * width：设置表格的宽度。 这些参数可以根据需要进行配置，以满足不同的数据显示需求。 ...
3. 树形结构：通过`treeGrid`配置项和相关方法，可以展示层次化数据。 4. 行选择：支持单行、多行和全选，可通过`selarrrow`获取选中行数据。 5. 表格事件：包括`loadComplete`、`clickRow`、`beforeSelectRow`等...
- **plugins**：插件目录存放了扩展jqGrid功能的各种插件，如`subgrid`用于子网格，`treegrid`用于树形结构展示，`navigator`提供额外的导航按钮，如添加、删除、编辑等。 - **js**：JavaScript代码的核心部分，...
1. **启用树形视图**：在jqGrid配置中，需设置`treeGrid: true`来开启树形视图模式。同时，`ExpandColumn`属性定义了展开/折叠节点的列，而`treeGridModel`定义了树的扩展方式，通常可选"nested"（嵌套）或...
这个"jqGrid 5.3全演示包"包含了jqGrid的最新版本v5.3.1，以及与之相关的多个组件的演示示例，如bootstrap集成、pivotgrid（行转列）和treegrid（树形结构表格）。这些演示将帮助开发者更好地理解和使用jqGrid的各种...
- jqGrid的插件如`jqGrid TreeGrid`允许创建树形结构的表格，用于展示层级关系的数据。 - `jqGrid SubGrid`可以为每一行添加展开/折叠子表格的功能，便于查看详细信息。 - `jqGrid Form Editing`提供了弹出式或内联...
除了基本功能，jqGrid还有许多第三方扩展，如`jqGrid Footer`（添加表格底部行）、`jqGrid Subgrid`（子表格）和`jqGrid TreeGrid`（树形结构表格）等，这些扩展增强了jqGrid的功能和适用性。 ### 6. 版本更新与...
例如，使用jQuery UI的`nestedSortable`插件可以创建可排序的树形表格。 实现步骤： 1. **设计HTML和服务器端控件** 在ASP.NET页面上，我们需要添加对应的TreeGrid控件，并设置必要的属性。如果是使用JavaScript...
总的来说，Guriddo_jqGrid_JS_5.3.1.zip是一个全面的jqGrid资源包，不仅提供了基本的表格功能，还支持Bootstrap风格、行转列分析（pivotgrid）和树形结构（treegrid）等功能。开发者可以通过解压这个压缩包，研究...
**描述:** 设置用于展开树形结构的列名。 **属性详情:** - **类型**: String - **默认值**: `null` - **兼容性**: - 仅当`treeGrid`设置为`true`时才有效。 ##### 23. `footerrow` (footerrow) **描述:** 设置...
4. **JavaScript 插件**：“js”目录可能包含jqGrid的额外插件或扩展，比如树形结构的支持（treegrid）、行内编辑模式（inline editing）、弹出式编辑对话框（form editing）等，这些插件增强了jqGrid的功能性。...