2367人阅读
JavaScript — jQuery（8）
* 1）扩展jquery easyui tree的节点检索方法。使用方法如下：
* $(&#treeId&).tree(&search&, searchText);
* 其中，treeId为easyui tree的根UL元素的ID，searchText为检索的文本。
* 如果searchText为空或&&，将恢复展示所有节点为正常状态
(function($) {
$.extend($.fn.tree.methods, {
* 扩展easyui tree的搜索方法
* @param tree easyui tree的根DOM节点(UL节点)的jQuery对象
* @param searchText 检索的文本
* @param this-context easyui tree的tree对象
search: function(jqTree, searchText) {
//easyui tree的tree对象。可以通过tree.methodName(jqTree)方式调用easyui tree的方法
var tree =
//获取所有的树节点
var nodeList = getAllNodes(jqTree, tree);
//如果没有搜索条件，则展示所有树节点
searchText = $.trim(searchText);
if (searchText == &&) {
for (var i=0; i&nodeList. i++) {
$(&.tree-node-targeted&, nodeList[i].target).removeClass(&tree-node-targeted&);
$(nodeList[i].target).show();
//展开已选择的节点（如果之前选择了）
var selectedNode = tree.getSelected(jqTree);
if (selectedNode) {
tree.expandTo(jqTree, selectedNode.target);
//搜索匹配的节点并高亮显示
var matchedNodeList = [];
if (nodeList && nodeList.length&0) {
var node =
for (var i=0; i&nodeList. i++) {
node = nodeList[i];
if (isMatch(searchText, node.text)) {
matchedNodeList.push(node);
//隐藏所有节点
for (var i=0; i&nodeList. i++) {
$(&.tree-node-targeted&, nodeList[i].target).removeClass(&tree-node-targeted&);
$(nodeList[i].target).hide();
//折叠所有节点
tree.collapseAll(jqTree);
//展示所有匹配的节点以及父节点
for (var i=0; i&matchedNodeList. i++) {
showMatchedNode(jqTree, tree, matchedNodeList[i]);
* 展示节点的子节点（子节点有可能在搜索的过程中被隐藏了）
* @param node easyui tree节点
showChildren: function(jqTree, node) {
//easyui tree的tree对象。可以通过tree.methodName(jqTree)方式调用easyui tree的方法
var tree =
//展示子节点
if (!tree.isLeaf(jqTree, node.target)) {
var children = tree.getChildren(jqTree, node.target);
if (children && children.length&0) {
for (var i=0; i&children. i++) {
if ($(children[i].target).is(&:hidden&)) {
$(children[i].target).show();
* 将滚动条滚动到指定的节点位置，使该节点可见（如果有滚动条才滚动，没有滚动条就不滚动）
* @param param {
treeContainer: easyui tree的容器（即存在滚动条的树容器）。如果为null，则取easyui tree的根UL节点的父节点。
targetNode:
将要滚动到的easyui tree节点。如果targetNode为空，则默认滚动到当前已选中的节点，如果没有选中的节点，则不滚动
scrollTo: function(jqTree, param) {
//easyui tree的tree对象。可以通过tree.methodName(jqTree)方式调用easyui tree的方法
var tree =
//如果node为空，则获取当前选中的node
var targetNode = param && param.targetNode ? param.targetNode : tree.getSelected(jqTree);
if (targetNode != null) {
//判断节点是否在可视区域
var root = tree.getRoot(jqTree);
var $targetNode = $(targetNode.target);
var container = param && param.treeContainer ? param.treeContainer : jqTree.parent();
var containerH = container.height();
var nodeOffsetHeight = $targetNode.offset().top - container.offset().
if (nodeOffsetHeight & (containerH - 30)) {
var scrollHeight = container.scrollTop() + nodeOffsetHeight - containerH + 30;
container.scrollTop(scrollHeight);
* 展示搜索匹配的节点
function showMatchedNode(jqTree, tree, node) {
//展示所有父节点
$(node.target).show();
$(&.tree-title&, node.target).addClass(&tree-node-targeted&);
var pNode =
while ((pNode = tree.getParent(jqTree, pNode.target))) {
$(pNode.target).show();
//展开到该节点
tree.expandTo(jqTree, node.target);
//如果是非叶子节点，需折叠该节点的所有子节点
if (!tree.isLeaf(jqTree, node.target)) {
tree.collapse(jqTree, node.target);
* 判断searchText是否与targetText匹配
* @param searchText 检索的文本
* @param targetText 目标文本
* @return true-检索的文本与目标文本匹配；否则为false.
function isMatch(searchText, targetText) {
return $.trim(targetText)!=&& && targetText.indexOf(searchText)!=-1;
* 获取easyui tree的所有node节点
function getAllNodes(jqTree, tree) {
var allNodeList = jqTree.data(&allNodeList&);
if (!allNodeList) {
var roots = tree.getRoots(jqTree);
allNodeList = getChildNodeList(jqTree, tree, roots);
jqTree.data(&allNodeList&, allNodeList);
return allNodeL
* 定义获取easyui tree的子节点的递归算法
function getChildNodeList(jqTree, tree, nodes) {
var childNodeList = [];
if (nodes && nodes.length&0) {
var node =
for (var i=0; i&nodes. i++) {
node = nodes[i];
childNodeList.push(node);
if (!tree.isLeaf(jqTree, node.target)) {
var children = tree.getChildren(jqTree, node.target);
childNodeList = childNodeList.concat(getChildNodeList(jqTree, tree, children));
return childNodeL
})(jQuery);
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：120309次
积分：1155
积分：1155
排名：千里之外
原创：25篇
转载：19篇
评论：14条
(1)(3)(11)(3)(1)(2)(9)(3)(3)(5)(3)4355人阅读
easyui（7）
1、逐级加载：逐级加载对于数据量比较大的tree，逐级加载可以有效的缓解服务器压力，提升用户体验。逐级加载发送的请求参数：当前节点id，该参数是客户端自动发送的；接收的响应数据：通过当前节点id，查询的直属子级所有数据；所以在逐级加载与全部加载获取tree数据的代码方面，前端easyui方法调用的代码是相同的，而服务端方法不同，逐级加载需要接收当前展开节点id来获取子级数据(首次加载id为空)，全部加载无需参数，服务器返回的数据逐级加载只有子级数据，而全部加载子级、孙子级数据。
2、刷新，刷新指定节点：刷新分为刷新整个树和刷新指定节点，如果是刷新整个树，调用代码为("#tree").tree("reload")此时无需，如果刷新指定节点，调用代码为(“#tree”).tree(“reload”,parentNode.target)，传入需要刷新节点的父节点的target属性作为参数(刷新当前节点传入当前节点的target属性结果当前节点并未刷新，而是刷型了子节点)。使用过程中，对树节点执行新增和修改操作，都需要获取当前选中节点的父节点进行刷新；对树节点执行删除操作，需要获取当前选中节点父节点的父节点(即爷爷节点)进行刷新，否则可能有些效果无法体现。
3、全部展开：分为展开整个树和展开指定节点下所有节点，调用方法分别为("#tree").tree("expandAll")和(“#tree”).tree(“expandAll”,selectedNode.target)，两者之间没有什么可注意。这里想说的是另外一个问题，是与全部加载和逐级加载相关联的一个问题。
(1)、先对expandAll全部展开动作进行一下剖析：
第一：只对当前页面已经获取的即已经加载出来的节点执行展开动作，
第二：全部展开expandAll实际执行的是expand的循环操作，如果当前节点可展开但还没有加载子节点，则向服务器发送id请求子节点数据，
(2)、下面用一个示例看看在逐级加载的树中执行全部展开存在的问题以及解决方案，完整的tree如下图：
加载tree的方式为逐级加载，展开全树的过程：首次加载显示【顶级A】，然后点击展开箭头，自动向服务器发送【顶级A】的id作为参数，获取【二级A】、【二级B】，再点击【二级B】展开箭头发送【二级B】的id，获取【三级A】，点击【三级A】展开箭头发送【三级A】的id获取【四级A】、【四级B】
注：点击展开箭头与执行expand方法(expandAll实际也是expand方法)过程相同，都会触发onBeforeExpand事件
(3)、执行expandAll过程及问题：首次加载获取了【顶级A】，执行expandAll，因为【顶级A】的子节点还没有被加载，则向服务器请求子节点数据，因为服务器端返回数据方式为逐级返回(逐级加载)，拿到的数据只有【二级A】、【二级B】，之后并不会自动对【二级B】执行expandAll，而此时我们希望获取【顶级A】下面所有子级、孙子级数据
(4)、我们希望发送一个新的请求地址来获取子级、孙子级数据，或者通过传递参数，让服务器端逐级获取数据的方法通过参数判断此时应该返回当前节点下的全部数据，而不是只有子级数据，那么怎么来做呢？其实很简单，如下：
客户端方法：
function loadTree(){
isAll = false;
$('#tree').tree({
url: '/tree/son/ajax',
queryParams:{isAll:isAll},
onBeforeExpand:function(node){
$('#tree').tree('options').queryParams = {id:node.id,isAll:isAll};
if(isAll == true){
$('#tree').tree('options').url = '/tree/all/ajax';
function openAllChildren(){
isAll = true;
var selectNode = $("#tree").tree('getSelected');
$("#orgTree").tree("expandAll",selectNode.target);
服务端方法：
public String getTreeList(String id,boolean isAll){
List&Tree& treeList = new ArrayList&Tree&();
if(!isAll){
if("".equals(id)){
treeList = service.getChildrenTreeNode();
treeList = service.getChildrenTreeNodeById(id);
if("".equals(id)){
treeList = service.getAllChildrenTreeNode();
treeList = service.getAllChildrenTreeNodeById(id);
return JsonMapper.toJsonString(treeList);
public String getChildrenTreeList(String id){
List&Tree& treeList = new ArrayList&Tree&();
if("".equals(id)){
treeList = service.getChildrenTreeNode();
treeList = service.getChildrenTreeNodeById(id);
return JsonMapper.toJsonString(treeList);
public String getAllChildrenTreeList(String id){
List&Tree& treeList = new ArrayList&Tree&();
if("".equals(id)){
treeList = service.getAllChildrenTreeNode();
treeList = service.getAllChildrenTreeNodeById(id);
return JsonMapper.toJsonString(treeList);
总结：解决这个问题的关键就是通过onBeforeExpand事件重置请求参数或请求路径，而对于非逐级加载的方式，不存在这样的问题。
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：266707次
积分：4049
积分：4049
排名：第5368名
原创：148篇
转载：54篇
评论：29条
(31)(14)(3)(14)(11)(2)(15)(3)(12)(9)(4)(7)(1)(1)(5)(3)(6)(3)(1)(4)(19)(4)(26)(6)easyui tree怎么获取子节点的全部子节点？_百度知道tree getChildren不能获得某个节点的子节点
& tree getChildren不能获得某个节点的子节点
Started by:
Number of posts: 1
tree getChildren不能获得某个节点的子节点
&ul id="tt"&
&span&root&/span&
&span&root1&/span&
&li&root11&/li&
&li&root12&/li&
&li&root13&/li&
&li&root14&/li&
当我想获取root1下面的所有子节点（当前选择的节点是：root1）
//var node = $('#tt').tree('getSelected');
var _childrens = $('#tt').tree('getChildren', node.target);
//or var _childrens = $('#tt').tree('getChildren', node);
出现的不是root1下面的子节点，而是root根子点下所有节点。
如何获取某一子节点下的所有子节点？
Powered by
Unless otherwise stated, the content of this page is licensed under
Click here to edit contents of this page.
Click here to toggle editing of individual sections of the page (if possible).
Watch headings for an &edit& link when available.
Append content without editing the whole page source.
Check out how this page has evolved in the past.
If you want to discuss contents of this page - this is the easiest way to do it.
View and manage file attachments for this page.
A few useful tools to manage this Site.
See pages that link to and include this page.
Change the name (also URL address, possibly the category) of the page.
View wiki source for this page without editing.
View/set parent page (used for creating breadcrumbs and structured layout).
Notify administrators if there is objectionable content in this page.
Something does not work as expected? Find out what you can do.
documentation and help section.
Terms of Service - what you can, what you should not etc.
Privacy Policy.