jqGrid的树形表格：treeGrid

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
———————————-

Js代码

{

"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]}

]

}

Html代码

<%@ 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>

$(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>

</body>

</html>

第二个例子

Js代码

[

{"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"}

]

Html代码

<%@ 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>

$(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>

</body>

</html>

一些自己实现的方法

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

Js代码

/* 以下是常用的方法 */

/**

* 设定默认关闭的等级，同时自动关闭它的下一级

* 这里递归，出现错误

* @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]);

}

不静之心

jqGrid的树形表格：treeGrid

发表评论取消回复

访问信息

功能

近期评论

不静之心

jqGrid的树形表格：treeGrid

发表评论 取消回复

访问信息

功能

近期评论

发表评论取消回复