easyui tree扩展tree方法获取目标节点的一级子节点
Easyui tree扩展tree方法获取目标节点的一级子节点
/* 只返回目标节点的第一级子节点，具体的用法和getChildren方法是一样的 */
$.extend($.fn.tree.methods,{
getLeafChildren:function(jq, params){
var nodes = [];
$(params).next().children().children("div.tree-node").each(function(){
nodes.push($(jq[0]).tree('getNode',this));
});
return nodes;
}
});
项目中需要实现以下效果，点击左边tree,在右边显示小区，而且小区所属的区、市、省也要对应显示出来。
1、选中的节点，显示在右边区域
2、点击右边的收缩查看--展开折叠效果
3、遍历右边 省市区没有，则移除父级-市；省市没有时，移除父级-省
实现的代码如下
$('#tree-box').tree({
url : "termin***tion!initTress.html",
// data : treejson,
animate : true,
checkbox : true,
cascadeCheck : true,
onlyLeafCheck : false,
lines : true,
dnd : false,
onCheck : function (node,checked) { /*选中的节点，显示在右边区域*/
var node = node;
moveToRight(node);
}
}
/*选中的节点，显示在右边区域*/
function moveToRight(node){ var tree = $("#tree-box");//树标签
var lelOne = tree.tree('getRoots');//一级节点（省）
var lelOneLength = lelOne.length;
// console.log(lelOne);
if(lelOneLength>0){
//遍历一级节点
for(var i=0;i<lelOneLength;i++){
var lelTwo = tree.tree('getLeafChildren', lelOne[i].target);//二级节点（市）
var lelTwoLength = lelTwo.length;
// console.log(lelTwo);
if(lelTwoLength>0){
//遍历二级节点
for(var j=0;j<lelTwoLength;j++){
var lelTree = tree.tree('getLeafChildren', lelTwo[j].target);//三级节点（县、区）
var lelTreeLength = lelTree.length;
// console.log(lelTree);
if(lelTreeLength>0){
//遍历三级节点
for(var k=0;k<lelTreeLength;k++){
var lelFour = tree.tree('getLeafChildren', lelTree[k].target);//四级节点（小区）
var lelFourLength = lelFour.length;
var housecheck = 0; if(lelFourLength>0){
//遍历四级节点，小区
for(var m=0;m<lelFourLength;m++){
if(lelFour[m].checked){
housecheck = 1;
}
}
//该县区没有小区被勾选
if(housecheck==0){
// console.log(lelTree[k]);
var Parent1_none = lelTree[k].domId; //父级（小区所在的县、区）
var Parent1DomId_none = "#"+Parent1_none+"l";
var Parent1DomId_none_children = "."+Parent1_none;
if($("#win").find(Parent1DomId_none).length>0){
$("#win").find(Parent1DomId_none).remove();
$("#win").find(Parent1DomId_none_children).remove();
} }
//该县区有小区被勾选
if(housecheck==1){
var Parent1 = tree.tree('getParent', lelFour[0].target);//父级（小区所在的县、区）
var Parent2 = tree.tree('getParent', Parent1.target);//父级（小区所在的市）
var Parent3 = tree.tree('getParent', Parent2.target);//父级（小区所在的省） var sheng = '<div class="path-box path-box3" id="' + Parent3.domId +"l"+ '">' +
'<div class="path path3 clearfix">' +
'<div class="path-delete path-delete3 fl"></div>' +
'<div class="area-title fl">' + Parent3.text + '</div>' +
/*'<div class="area-title fl">（132）</div>' +*/
'<div class="area-title control unfold fl">收缩</div></div>'+
'</div></div>'; var shengshi = '<div class="path-box path-box2" id="' + Parent2.domId +"l"+ '">' +
'<div class="path path2 clearfix">' +
'<div class="path-delete path-delete2 fl"></div>' +
'<div class="area-title fl">' + Parent3.text + '</div>' +
'<div class="area-title fl">></div>' +
'<div class="area-title fl">' + Parent2.text + '</div>' +
/*'<div class="area-title fl">（132）</div>' +*/
'<div class="area-title control unfold fl">收缩</div></div>'+
'</div></div>'; var shengshiqu = '<div class="path-box path-box1" id="' + Parent1.domId +"l"+ '">' +
'<div class="path path1 clearfix">' +
'<div class="path-delete path-delete1 fl"></div>' +
'<div class="area-title fl">' + Parent3.text + '</div>' +
'<div class="area-title fl">></div>' +
'<div class="area-title fl">' + Parent2.text + '</div>' +
'<div class="area-title fl">></div>' +
'<div class="area-title fl">' + Parent1.text + '</div>' +
/* '<div class="area-title fl">（132）</div>' +*/
'<div class="area-title control unfold fl">收缩</div></div>'+
'</div></div>'; var Parent1_DomId = "#"+Parent1.domId+"l";
var Parent2_DomId = "#"+Parent2.domId+"l";
var Parent3_DomId = "#"+Parent3.domId+"l"; var Parent1_DomId_class = "."+Parent1.domId+"_1";
var Parent2_DomId_class = "."+Parent2.domId+"_2";
var Parent3_DomId_class = "."+Parent3.domId+"_3"; //插入省 例：广东省（88）收缩
if($("#win").find(Parent3_DomId).length==0){
var shengBox = '<div class="community community1 clearfix ' + Parent3.domId +"_3"+'"></div>';
$("#win").find(".path-wrap").append(sheng);
$("#win").find(Parent3_DomId).append(shengBox);
//
} //插入省市 例：广东省>广州市（88）收缩
if($("#win").find(Parent2_DomId).length==0){
var shengshiBox = '<div class="community community2 clearfix ' + Parent2.domId +"_2"+'"></div>';
$("#win").find(Parent3_DomId_class).append(shengshi);
$("#win").find(Parent2_DomId).append(shengshiBox);
//
} //插入省市区 例：广东省>广州市>天河区（55）收缩
if($("#win").find(Parent1_DomId).length==0){
var shengshiquBox = '<div class="community xiaoqu-name clearfix ' + Parent1.domId +"_1"+'"></div>';
$("#win").find(Parent2_DomId_class).append(shengshiqu);
$("#win").find(Parent1_DomId).append(shengshiquBox);
//
}
//插入小区 例：小区名称1 小区名称2 小区名称3
for(var m=0;m<lelFourLength;m++){
var communityId = lelFour[m].id;
var communityDomId = lelFour[m].domId;
var communityText = lelFour[m].text; var xiaoquming ='<div class="community-name fl" data-id="'+ communityId +'"id="'+ communityDomId + "m" +'">'+ communityText+ '</div>'; var nameid = "#"+communityDomId +"m";
var lelFourChecked = lelFour[m].checked;
if(lelFourChecked){
if($("#win").find(nameid).length==0){
$("#win").find(Parent1_DomId_class).append(xiaoquming);
}
}
if(!lelFourChecked){
if($("#win").find(nameid).length>0){
$("#win").find(nameid).remove();
} }
}
// }
} }
} }
} }
} /* 点击删除右边，左边树形对应的节点取消选中 */
cancelLeft(); /* 点击右边的收缩查看--展开折叠效果（弹窗里） */
quFoldAndUnfoldM(); /*遍历右边 省市区没有，则移除父级-市；省市没有时，移除父级-省*/
moveParent(); }
/* 删除右边，左边树形对应的节点取消选中 */
function cancelLeft(){
//点省前的叉号
$("#win").find(".path-delete3").on("click",function(){
var wrap3 = $(this).parent().parent();
var cancelCommunityName3 = wrap3.find(".community-name");
var shengWrap = wrap3.find(".community2").children(); cancelCommunityName3.each(function(){
var dataId = $(this).attr("data-id");
var cancelNode = $('#tree-box').tree('find', dataId);
$("#tree-box").tree('uncheck', cancelNode.target); }); wrap3.remove();
}); //点省市前的叉号
$("#win").find(".path-delete2").on("click",function(){
var wrap2 = $(this).parent().parent();
var wrap2_parent = wrap2.parent().parent();
var cancelCommunityName2 = wrap2.find(".community-name"); cancelCommunityName2.each(function(){
var dataId = $(this).attr("data-id");
var cancelNode = $('#tree-box').tree('find', dataId);
$("#tree-box").tree('uncheck', cancelNode.target); }); wrap2.remove();
var length2 = wrap2_parent.find(".path-box2").length; if(length2==0){
wrap2_parent.remove();
} }); //点省市区前的叉号
$("#win").find(".path-delete1").on("click",function(){
var wrap1 = $(this).parent().parent();
var wrap1_parent = wrap1.parent().parent();
var wrap1_parent_shi = $(this).parents(".community1");
var wrap1_parent_sheng = $(this).parents(".path-box3"); var cancelCommunityName1 = wrap1.find(".community-name"); cancelCommunityName1.each(function(){
var dataId = $(this).attr("data-id");
var cancelNode = $('#tree-box').tree('find', dataId);
$("#tree-box").tree('uncheck', cancelNode.target); });
var length1 = wrap1_parent.find(".path-box1").length; if(length1==0){
wrap1_parent.remove(); }
var length2 = wrap1_parent_shi.children().length;
if(length2==0){
wrap1_parent_sheng.remove();
} })
}
/* 点击右边的收缩查看--展开折叠效果（弹窗里） */
function quFoldAndUnfoldM(){
var foldState1 = 1;
var foldState2 = 1;
var foldState3 = 1;
//广东省 查看收缩效果
$(".path3 .control").on("click",function(){ var cancelCommunityName = $(this).parent().next(".community");
if(foldState3){
$(this).empty().html("查看");
cancelCommunityName.hide();
foldState3 = 0;
}else{
$(this).empty().html("收缩");
cancelCommunityName.show();
foldState3 = 1;
} }); //广东省>广州市 查看收缩效果
$(".path2 .control").on("click",function(){ var cancelCommunityName = $(this).parent().next(".community");
if(foldState2){
$(this).empty().html("查看");
cancelCommunityName.hide();
foldState2 = 0;
}else{
$(this).empty().html("收缩");
cancelCommunityName.show();
foldState2 = 1;
} }); //广东省>广州市>天河区 查看收缩效果
$(".path1 .control").on("click",function(){ var cancelCommunityName = $(this).parent().next(".community");
if(foldState1){
$(this).empty().html("查看");
cancelCommunityName.hide();
foldState1 = 0;
}else{
$(this).empty().html("收缩");
cancelCommunityName.show();
foldState1 = 1;
} });
}
/*遍历右边 省市区、省市没有时，父级移除*/
function moveParent(){ $("#win").find(".community2").each(function(){
var length2 = $(this).children().length;
if(length2==0){
$(this).parents(".path-box2").remove();
}
}); $("#win").find(".community1").each(function(){
var length1 = $(this).children().length;
if(length1==0){
$(this).parents(".path-box3").remove();
}
});
}
easyui tree扩展tree方法获取目标节点的一级子节点的更多相关文章
- 如何设计点击点击一个div，其他div做出对应反应，以及获取一个节点下的子节点
<div id="show"> <div>1</div> <div>2</div> <div>3</d ...
- [转]Javascript removeChild()删除节点及删除子节点的方法(同样适用于jq)
Javascript removeChild()删除节点及删除子节点的方法 这篇文章主要介绍了Javascript removeChild()删除节点及删除子节点的方法的相关资料,需要的朋友可以参考下 ...
- JS编程练习：将目标节点内部的子节点逆序
将目标节点内部的子节点逆序 1 <body> 2 <div> 3 <p></p> 4 <span></span> 5 <e ...
- 删除TreeView节点以及其子节点
//1.删除TreeView节点以及其子节点procedure TForm2.Button1Click(Sender: TObject);var TreeNode:TTreeNode;begin i ...
- zTree中父节点禁用，子节点可以用
参考学习网址:http://www.treejs.cn/v3/main.php#_zTreeInfo zTree中父节点禁用,子节点可以用 axios.get('/base/unit/unittree ...
- JS获取父、兄、子节点
一.jQuery的父节点查找方法 $(selector).parent(selector):获取父节点 $(selector).parentNode:以node[]的形式存放父节点,如果没有父节点,则 ...
- js，jq获取父，兄弟，子节点整理
js获取节点 父: parentNode 获取已知节点的父节点. 子: childNodes; 得到全部子节点 children 得到全部子节点 firstChild 获得第一个子节点 lastChi ...
- js和jq获取父，兄弟，子节点
1,js获取节点: 父: parentNode 获取已知节点的父节点. 子: childNodes; 得到全部子节点 children 得到全部子节点 firstChild 获得第一个子节点 last ...
- layui xtree 实现一级节点单选 ，子节点复选
在外部定义变量和方法 //定义变量 接收顶级节点的值 var topValue; // 获取顶级节点值的方法 function getParent(value) { var val = project ...
随机推荐
- schwarz（ 施瓦兹）不等式证明
证明 如果: 函数 y=ax^2+2bx+c 对任意x >=0 时 y>=0; 函数图象在全部x轴上方,故二次方程判别式 b^2-4ac<=0;(即方程无实数解) 即(2b)^2&l ...
- 基于MATLAB的RGB转YCBCR色彩空间转换
使用MATLAB进行图片的处理十分方便,看它的名字就知道了,矩阵实验室(matrix laboratory).一副图片的像素数据可以看成是一个二维数组一个大矩阵,MTABLAB就是为矩阵运算而生. M ...
- 【lazy标记得思想】HDU3635 详细学习并查集
部分内容摘自以下大佬的博客,感谢他们! http://blog.csdn.net/dm_vincent/article/details/7769159 http://blog.csdn.net/dm_ ...
- jsp ckeditor ckfinder
我认为对的事情,有可能是完全错的. 这篇教程很好: http://www.cnblogs.com/yuepeng/archive/2013/04/01/2992097.html 只看到9,权限控制还没 ...
- Oracle财务系统常用标准报表
http://erpoperator.blog.163.com/blog/static/17899637220111181121616/ Oracle财务系统常用标准报表 总账系统 系统报表名 中文译 ...
- [翻译] FastReport 变量列表使用
使用报表变量时,引用"frxVariables"单元. 变量定义在"TfrxVariable" 类: TfrxVariable = class(TCollect ...
- ReactJS 官网案例分析
案例一.聊天室案例 /** * This file provided by Facebook is for non-commercial testing and evaluation * purpos ...
- 关于ListBox的几个问题
Winfrom ListBox绑定数据源list界面不更新问题与绑定数据源不可CRUD问题 场景:获取一个listbox的选中项添加到另一个listbox中 解决方案-1:不要直接绑定DataSour ...
- win10 打开sql server配置管理器
win10 安装 sql server之后无法在开始菜单找到“sql server 配置管理器(SQL server configuration manager 1)在开始菜单中,无法找到 配置管理器 ...
- Android------------fragment数据传递
一.activity向fragment的数值之间的传递 关键点:fragment.setArguments(bundle);---->activity发出的信息 Bundle bund ...