87,907
社区成员
发帖
与我相关
我的任务
分享jquery treegrid展开问题
刚接触jquery不久，现遇到一个问题，描述如下
有树型结构
01
--0101
----010101
----010102
--0102
----010201
----010202
02
--0201
--0202
03
--0301
----030301
----030302
要求我在点击某根节点的时候能将所有的子节点（包括子节点的子节点）展开。
如上所示，我点击01的时候，不管0101,0102是否收缩或展开，其01下的所有子节点都能展开，请各位帮忙，十分感谢！
有树型结构
01
--0101
----010101
----010102
--0102
----010201
----010202
02
--0201
--0202
03
--0301
----030301
----030302
要求我在点击某根节点的时候能将所有的子节点（包括子节点的子节点）展开。
如上所示，我点击01的时候，不管0101,0102是否收缩或展开，其01下的所有子节点都能展开，请各位帮忙，十分感谢！
...全文
请发表友善的回复…
发表回复
逍遥庄主 2010-11-11
- 打赏
- 举报
html
treegrid_data.json
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
$(function(){
$('#test').treegrid({
title:'TreeGrid',
iconCls:'icon-save',
width:500,
height:350,
nowrap: false,
rownumbers: true,
animate:true,
collapsible:true,
url:'treegrid_data.json',
idField:'code',
treeField:'code',
frozenColumns:[[
{title:'code',field:'code',width:150,
formatter:function(value){
return '<span style="color:red">'+value+'</span>';
}
}
]],
columns:[[
{field:'name',title:'Name',width:120},
{field:'addr',title:'Address',width:120,rowspan:2},
{field:'col4',title:'Col41',width:150,rowspan:2}
]],
onBeforeLoad:function(row,param){
if (row){
$(this).treegrid('options').url = 'treegrid_subdata.json';
} else {
$(this).treegrid('options').url = 'treegrid_data.json';
}
},
onContextMenu: function(e,row){
e.preventDefault();
$(this).treegrid('unselectAll');
$(this).treegrid('select', row.code);
$('#mm').menu('show', {
left: e.pageX,
top: e.pageY
});
},
onExpand:function(row){
$("#test").treegrid("expandAll",row.code);//expandAll方法有一个参数,表示这个结点
}
});
});
</script>
</head>
<body>
<h1>TreeGrid</h1>
<table id="test"></table>
<div id="mm" class="easyui-menu" style="width:120px;">
<div onclick="append()">Append</div>
<div onclick="remove()">Remove</div>
</div>
</body>
</html>
treegrid_data.json
[{
"id":1,
"code":"01",
"name":"name1",
"addr":"address1",
"col4":"col4 data",
"iconCls":"icon-ok",
"children":[{
"id":2,
"code":"0101",
"name":"name11",
"addr":"address11",
"checked":true
},{
"id":3,
"code":"0102",
"name":"name12",
"addr":"address12",
"state":"closed"
}]
},{
"code":"02",
"name":"Languages abc",
"addr":"address2",
"col4":"col4 data",
"state":"closed",
"children":[{
"code":"0201",
"name":"Java",
"col4":"col4 data",
"state":"closed",
"children":[{
"code":"02013",
"name":"jdk1"
},{
"code":"02014",
"name":"jdk2"
}]
},{
"code":"0202",
"name":"C#",
"col4":"col4 data"
}]
}]
龙心 2010-11-11
- 打赏
- 举报
比如treegrid里有将所有节点都展开的函数
function expandAll(){
$('#test').treegrid('expandAll');
}
也有将你所选择的节点展开的函数
function expand(){
var node = $('#test').treegrid('getSelected');
if (node){
$('#test').treegrid('expand', node.code);
}
}
现在有一个问题就是，在调用expand()函数的时候，它不会将收缩的子节点也展开，而是保留收缩的状态，现要求就是不管子节点是否收缩，全部展开。请大家帮忙，十分感谢。
function expandAll(){
$('#test').treegrid('expandAll');
}
也有将你所选择的节点展开的函数
function expand(){
var node = $('#test').treegrid('getSelected');
if (node){
$('#test').treegrid('expand', node.code);
}
}
现在有一个问题就是，在调用expand()函数的时候，它不会将收缩的子节点也展开，而是保留收缩的状态，现要求就是不管子节点是否收缩，全部展开。请大家帮忙，十分感谢。
龙心 2010-11-10
- 打赏
- 举报
[Quote=引用 1 楼 avon520 的回复:]
增加自定义变量，用于存放节点的状态
比如在点击展开的事件下把变量设置1，表示展开
以后读取此变量即可知道
[/Quote]
感谢你的回答，我现在是要实现[点击01的时候，不管0101,0102是否收缩或展开，其01下的所有子节点都能展开]的功能，不仅仅是知道某个节点是否打开。
增加自定义变量，用于存放节点的状态
比如在点击展开的事件下把变量设置1，表示展开
以后读取此变量即可知道
[/Quote]
感谢你的回答，我现在是要实现[点击01的时候，不管0101,0102是否收缩或展开，其01下的所有子节点都能展开]的功能，不仅仅是知道某个节点是否打开。
阿云ivan 2010-11-10
- 打赏
- 举报
增加自定义变量，用于存放节点的状态
比如在点击展开的事件下把变量设置1，表示展开
以后读取此变量即可知道
比如在点击展开的事件下把变量设置1，表示展开
以后读取此变量即可知道
