EasyUI为TreeGrid的已勾选节点，未勾选节点，只勾选部分子节点的父节点分别添加了三个不同的样式，如下：
样式一：tree-checkbox2 有子节点被选中
样式二：tree-checkbox1 节点被选中
样式三：tree-checkbox0 节点未选中
那么，我们就可以依据这三个样式分别取到所有已勾选的主键值了，为方便使用，我们写成TreeGrid的扩展方法，代码如下：
$.extend($.fn.treegrid.methods, {
//iscontains是否包含父节点（即子节点被选中时是否也取父节点）
getAllChecked: function (jq, iscontains) {
var keyValues = new Array();
/*
tree-checkbox2 有子节点被选中的css
tree-checkbox1 节点被选中的css
tree-checkbox0 节点未选中的css
*/
var checkNodes = jq.treegrid("getPanel").find(".tree-checkbox1");
for (var i = 0; i < checkNodes.length; i++) {
var keyValue1 = $($(checkNodes[i]).closest(‘tr‘)[0]).attr("node-id");
keyValues.push(keyValue1);
}
if (iscontains) {
var childCheckNodes = jq.treegrid("getPanel").find(".tree-checkbox2");
for (var i = 0; i < childCheckNodes.length; i++) {
var keyValue2 = $($(childCheckNodes[i]).closest(‘tr‘)[0]).attr("node-id");
keyValues.push(keyValue2);
}
}
return keyValues;
}
});
调用方法：
var kv = $("#XXX").treegrid("getAllChecked", true);
alert(kv);
另外，1.4.5版本以后的，提供如下几个方法：
var kv = $("#XXX").treegrid("getCheckedNodes"); 获取勾选的节点
var kv = $("#XXX").treegrid("checkNode",id); 根据ID勾选节点
var kv = $("#XXX").treegrid("uncheckNode",id); 根据ID取消勾选节点
jquery如何获取树勾选的所有子节点
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery如何获取树勾选的所有子节点相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<meta name="generator" content="HTML Tidy, see www.w3.org">
<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.4.min.js">
</script>
<script type="text/javascript" src="../jquery.easyui.min.js">
</script>
<script type="text/javascript">
$(function()
$(\'#tt2\').tree(
checkbox: true,
url: \'tree_data.json\',
onClick: function(node)
$(this).tree(\'toggle\', node.target);
//alert(\'you dbclick \'+node.text);
,
onContextMenu: function(e, node)
e.preventDefault();
$(\'#tt2\').tree(\'select\', node.target);
$(\'#mm\').menu(\'show\',
left: e.pageX,
top: e.pageY
);
);
);
function reload()
var node = $(\'#tt2\').tree(\'getSelected\');
if (node)
$(\'#tt2\').tree(\'reload\', node.target);
else
$(\'#tt2\').tree(\'reload\');
function getChildren()
var node = $(\'#tt2\').tree(\'getSelected\');
if (node)
var children = $(\'#tt2\').tree(\'getChildren\', node.target);
else
var children = $(\'#tt2\').tree(\'getChildren\');
var s = \'\';
for (var i = 0; i < children.length; i++)
s += children[i].text + \',\';
alert(s);
function getChecked()
var nodes = $(\'#tt2\').tree(\'getChecked\');
var s = \'\';
for (var i = 0; i < nodes.length; i++)
if (s != \'\')
s += \',\';
s += nodes[i].text;
alert(s);
function getSelected()
var node = $(\'#tt2\').tree(\'getSelected\');
alert(node.text);
function collapse()
var node = $(\'#tt2\').tree(\'getSelected\');
$(\'#tt2\').tree(\'collapse\', node.target);
function expand()
var node = $(\'#tt2\').tree(\'getSelected\');
$(\'#tt2\').tree(\'expand\', node.target);
function collapseAll()
var node = $(\'#tt2\').tree(\'getSelected\');
if (node)
$(\'#tt2\').tree(\'collapseAll\', node.target);
else
$(\'#tt2\').tree(\'collapseAll\');
function expandAll()
var node = $(\'#tt2\').tree(\'getSelected\');
if (node)
$(\'#tt2\').tree(\'expandAll\', node.target);
else
$(\'#tt2\').tree(\'expandAll\');
function append()
var node = $(\'#tt2\').tree(\'getSelected\');
$(\'#tt2\').tree(\'append\',
parent: (node ? node.target : null),
data: [
text: \'new1\',
checked: true
,
text: \'new2\',
state: \'closed\',
children: [
text: \'subnew1\'
,
text: \'subnew2\'
]
]
);
function remove()
var node = $(\'#tt2\').tree(\'getSelected\');
$(\'#tt2\').tree(\'remove\', node.target);
function update()
var node = $(\'#tt2\').tree(\'getSelected\');
if (node)
node.text = \'<span style="font-weight:bold">new text<\\/span>\';
node.iconCls = \'icon-save\';
$(\'#tt2\').tree(\'update\', node);
function isLeaf()
var node = $(\'#tt2\').tree(\'getSelected\');
var b = $(\'#tt2\').tree(\'isLeaf\', node.target);
alert(b)
function GetNode(type)
var node = $(\'#tt2\').tree(\'getChecked\');
var chilenodes = \'\';
var parantsnodes = \'\';
var prevNode = \'\';
for (var i = 0; i < node.length; i++)
if ($(\'#tt2\').tree(\'isLeaf\', node[i].target))
chilenodes += node[i].text + \',\';
var pnode = $(\'#tt2\').tree(\'getParent\', node[i].target);
if (prevNode != pnode.text)
parantsnodes += pnode.text + \',\';
prevNode = pnode.text;
chilenodes = chilenodes.substring(0, chilenodes.length - 1);
parantsnodes = parantsnodes.substring(0, parantsnodes.length - 1);
if (type == \'child\')
return chilenodes;
else
return parantsnodes
;
;
function getNodes()
alert(GetNode(\'fnode\') + "," + GetNode(\'child\'));
function doNode()
var c="";
var p="";
$(".tree-checkbox1").parent().children(\'.tree-title\').each(function()
c+=$(this).parent().attr(\'node-id\')+",";
);
$(".tree-checkbox2").parent().children(\'.tree-title\').each(function()
p+=$(this).parent().attr(\'node-id\')+",";
);
var str=(c+p);
str=str.substring(0,str.length-1);
alert(str);
</script>
</head>
<body>
<h1>Tree</h1>
<p>
Create from HTML markup
</p>
<ul id="tt1" class="easyui-tree" animate="true" dnd="true">
<li>
<span>Folder</span>
<ul>
<li state="closed">
<span>Sub Folder 1</span>
<ul>
<li>
<span><a href="#">File
11</a></span>
</li>
<li>
<span>File 12</span>
</li>
<li>
<span>File 13</span>
</li>
</ul>
</li>
<li>
<span>File 2</span>
</li>
<li>
<span>File 3</span>
</li>
<li>
File 4
</li>
<li>
File 5
</li>
</ul>
</li>
<li>
<span>File21</span>
</li>
</ul>
<hr>
<p>
Create from JSON data
</p>
<div style="margin:10px;">
<a href="#" onclick="reload()">reload</a>
<a href="#" onclick="getChildren()">getChildren</a>
<a href="#" onclick="getChecked()">getChecked</a>
<a href="#" onclick="getSelected()">getSelected</a>
<a href="#" onclick="collapse()">collapse</a>
<a href="#" onclick="expand()">expand</a>
<a href="#" onclick="collapseAll()">collapseAll</a>
<a href="#" onclick="expandAll()">expandAll</a>
<a href="#" onclick="append()">append</a>
<a href="#" onclick="remove()">remove</a>
<a href="#" onclick="update()">update</a>
<a href="#" onclick="isLeaf()">isLeaf</a>
<a href="#" onclick="getNodes()">getNodes</a>
<a href="#" onclick="doNode()">获取所有checkbox选中节点id</a>
</div>
<ul id="tt2">
</ul>
<div id="mm" class="easyui-menu" style="width:120px;">
<div onclick="append()" iconcls="icon-add">
Append
</div>
<div onclick="remove()" iconcls="icon-remove">
Remove
</div>
<div onclick="expand()">
Expand
</div>
<div onclick="collapse()">
Collapse
</div>
</div>
</body>
</html> 参考技术A 你的树是怎么样的啊
获取EasyUI的treegrid的checkbox所有已勾选的数据
以上是关于jquery如何获取树勾选的所有子节点的主要内容，如果未能解决你的问题，请参考以下文章
如何获取jquery easyui Tree的 （1）某一节点下的所有子节点，（2）某节点下的一级节点
“jquery easyui treegrid”如何获取所有选择的节点？