js写简易树结构
html
js
$(document).ready(function () {
//页面加载时获取数据function getDept(){jQuery.ajax({async: false,cache: false,type: "POST",url: horizon.paths.apppath+"/census/getDept.wf",data: {},dataType : "text",success: function(res) {var dept=JSON.parse(res);let dataList=dept;dataArr=setTreeData(dept);}});}
}
//转换数据类型
function setTreeData(arr) {// 删除所有的children,以防止多次调用arr.forEach(function(item) {delete item.children;});let map = {}; //构建maparr.forEach(function(i) {map[i.id] = i; //构建以id为键 当前数据为值});let treeData = [];arr.forEach(function(child) {let mapItem = map[child.parent_id]; //判断当前数据的parentId是否存在map中if (mapItem) {//存在则表示当前数据不是最顶层的数据//注意： 这里的map中的数据是引用了arr的它的指向还是arr,当mapItem改变时arr也会改变，踩坑点(mapItem.children || (mapItem.children = [])).push(child); //这里判断mapItem中是否存在child} else {//不存在则是顶层数据treeData.push(child);}});console.log(treeData)return treeData;}//打开弹窗var doc=document;Back=doc.getElementById('black');DialogBox2=doc.getElementById('dialogBox2')function openDialog(arg) {if(arg=="bumen"){ShowHide(true,Back,DialogBox2);xuanran2(dataArr,0,30,"liucheng");}if(arg=="bumen2"){ShowHide(true,Back,DialogBox2);xuanran2(dataArr,0,30,"liucheng2");}if(arg=="bumen3"){ShowHide(true,Back,DialogBox2);xuanran2(dataArr,0,30,"liucheng3");}if(arg=="bumen4"){ShowHide(true,Back,DialogBox2);xuanran2(dataArr,0,30,"liucheng4");}if(arg=="bumen5"){ShowHide(true,Back,DialogBox2);xuanran2(dataArr,0,30,"liucheng5");}}
//弹框显示与隐藏
function ShowHide(Boolean,item1,item2) {for(var i=1,len=arguments.length;i 0) {xuanran2(data[i].children, deep + 1, 30,type);}}}}
//点击内容和点击复选框都实现选中效果且不可多选。注：本人有多个选择部门的HTML
function checkBoxFun(obj,arg,type){console.log($(obj).find('input').prop("checked"))console.log(type)if(arg=="div"){if(type=="liucheng"){ if($(obj).find('input').prop("checked")==true){$(obj).find('input').prop("checked",false);dayName="";dayDept="";}else{$(".clicktext").not(this).find('input').prop("checked",false)//var aa= $(obj).find('input').siblings().prop("checked",false);$(obj).find('input').prop("checked",true);dayName=$(obj).find('p').text();dayDept=$(obj).find('p').text();}}if(type=="liucheng2"){if($(obj).find('input').prop("checked")==true){$(obj).find('input').prop("checked",false);monthName="";monthDept="";}else{$(".clicktext").not(this).find('input').prop("checked",false)//var aa= $(obj).find('input').siblings().prop("checked",false);$(obj).find('input').prop("checked",true);monthName=$(obj).find('p').text();monthDept=$(obj).find('p').text();}}if(type=="liucheng3"){if($(obj).find('input').prop("checked")==true){$(obj).find('input').prop("checked",false);quarterName="";quarterDept="";}else{$(".clicktext").not(this).find('input').prop("checked",false)//var aa= $(obj).find('input').siblings().prop("checked",false);$(obj).find('input').prop("checked",true);quarterName=$(obj).find('p').text();quarterDept=$(obj).find('p').text();}}if(type=="liucheng4"){if($(obj).find('input').prop("checked")==true){$(obj).find('input').prop("checked",false);yearName="";yearDept="";}else{$(".clicktext").not(this).find('input').prop("checked",false)//var aa= $(obj).find('input').siblings().prop("checked",false);$(obj).find('input').prop("checked",true);yearName=$(obj).find('p').text();yearDept=$(obj).find('p').text();}}if(type=="liucheng5"){if($(obj).find('input').prop("checked")==true){$(obj).find('input').prop("checked",false);customName="";customDept="";}else{$(".clicktext").not(this).find('input').prop("checked",false)//var aa= $(obj).find('input').siblings().prop("checked",false);$(obj).find('input').prop("checked",true);customName=$(obj).find('p').text();customDept=$(obj).find('p').text();}}}else {if(type=="liucheng"){if($(obj).prop("checked")==true) {$(obj).prop("checked",false);dayName="";dayDept="";}else{$(".clickBox").not(this).prop("checked",false);$(obj).prop("checked",true);dayName=$(obj).find('p').text();dayDept=$(obj).find('p').text();}}if(type=="liucheng2"){if($(obj).prop("checked")==true) {$(obj).prop("checked",false);monthName="";monthDept="";}else{$(".clickBox").not(this).prop("checked",false);$(obj).prop("checked",true);monthName=$(obj).find('p').text();monthDept=$(obj).find('p').text();}}if(type=="liucheng3"){if($(obj).prop("checked")==true) {$(obj).prop("checked",false);quarterName="";quarterDept="";}else{$(".clickBox").not(this).prop("checked",false);$(obj).prop("checked",true);quarterName=$(obj).find('p').text();quarterDept=$(obj).find('p').text();}}if(type=="liucheng4"){if($(obj).prop("checked")==true) {$(obj).prop("checked",false);yearName="";yearDept="";}else{$(".clickBox").not(this).prop("checked",false);$(obj).prop("checked",true);yearName=$(obj).find('p').text();yearDept=$(obj).find('p').text();}}if(type=="liucheng5"){if($(obj).prop("checked")==true) {$(obj).prop("checked",false);customName="";customDept="";}else{$(".clickBox").not(this).prop("checked",false);$(obj).prop("checked",true);customName=$(obj).find('p').text();customDept=$(obj).find('p').text();}}} }
/*** 控制菜单显示隐藏* @param obj 点击的元素* @param is 是否隐藏， true 为再次点击后不隐藏， false 再次点击后隐藏*/var is=false;function clickPtextFun(obj, is) { //点击的p 父元素的所有下面的兄弟元素var nextBro = $(obj).parent().nextAll();//点击的p的父元素var div = $(obj).parent();console.log(nextBro.data('deep'))console.log(div.data('deep'))for (var i = 0; i < nextBro.length; i++) { //当它下面的所有兄弟元素的深度 比他大一个数时， 代表他的儿子元素， 否则退出。 因为不比他大的都是兄弟元素或者父元素if ($(nextBro[i]).data('deep') == div.data('deep') + 1) {console.log(div.data('deep'))if (div.data('show') == 0 || div.data('show') == '0') {$(nextBro[i]).show();} else {if (!is) {$(nextBro[i]).hide();}}} else {break;}}div.data('show', (div.data('show') + 1) % 2);}
/*** 选框控制* @param obj*/function clickBoxFun(obj) {//当第一次点击选框后， 将列表展开 true为再次点击不隐藏clickPtextFun(obj, true);//点击的checkbox 父元素的所有下面的兄弟元素var nextBro = $(obj).parent().nextAll();//点击的checkbox的父元素var thisDiv = $(obj).parent();for (var i = 0; i < nextBro.length; i++) {//当他下面的深度大于它时， 全部选中， 否则就退出。 因为小于或等于的 都是兄弟元素或者父元素if ($(nextBro[i]).data('deep') > thisDiv.data('deep')) {if (thisDiv.find('input').is(':checked')) {$(nextBro[i]).find('input').prop('checked', true);} else {$(nextBro[i]).find('input').prop('checked', false);}} else {break;}}}
//确定并关闭弹框function submit(arg){if(arg=="bumen"){if(dayDept!=""){jQuery("#dept").prop('value',dayDept);ShowHide(false,Back,DialogBox2);document.getElementById("allTree2").innerHTML="";dayDept="";return;}if(monthDept!=""){jQuery("#dept2").prop('value',monthDept);ShowHide(false,Back,DialogBox2);document.getElementById("allTree2").innerHTML="";monthDept="";return;}if(quarterDept!=""){jQuery("#dept3").prop('value',quarterDept);ShowHide(false,Back,DialogBox2);document.getElementById("allTree2").innerHTML="";quarterDept="";return;}if(yearDept!=""){jQuery("#dept4").prop('value',yearDept);ShowHide(false,Back,DialogBox2);document.getElementById("allTree2").innerHTML="";yearDept="";return;}if(customDept!=""){jQuery("#dept5").prop('value',customDept);ShowHide(false,Back,DialogBox2);document.getElementById("allTree2").innerHTML="";customDept="";return;}parent.horizon.notice.warning("请选择部门");}} 遇到的问题：
1、弹框关闭在打开数据重复。
解决：关闭弹框后要清空数据
document.getElementById("allTree2").innerHTML="";
2、prop()和attr()
prop是标签自带属性都可以操作。
attr操作自己定义的属性。
3、setAttribute('onclick','function')传参问题。
setAttribute('onclick','checkBoxFun(this,"div",type)')动态给创建的标签添加点击事件
param只能传固定参数，传变量的话调用的函数获取不到，报undefined。例：type报undefined
解决:div.οnclick=(function(){
checkBoxFun(this,"div",type);
});
参考文章：https://blog.csdn.net/just_for_your_smile/article/details/78582141
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！