JS带选择框的树

最新推荐文章于 2024-10-10 12:04:38 发布
最新推荐文章于 2024-10-10 12:04:38 发布
阅读量681 收藏 1
点赞数
分类专栏： web 文章标签： function float null tree div url
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tianmengtm/article/details/7095097
版权


带选择框的树。效果图：



主要函数介绍：

1、实例化树：var tree = new MyTree("Tree1", true, -1); 

参数介绍：第一个参数是树的名称。第二个参数是带不带选择框，第三个参数是第一个父结点的ID。


2、增加树节点：tree.Add(0, -1, "区域设置","","","treestyle/folder.png"); //nodeId, nodePId, nodeTxt, nodeUrl, nodeTarget, nodeImg


3、显示树：tree.Show();


4、展开所有结点：tree.FullExpand();


5、收缩所有结点：tree.FullCollapse();


6、选择所有结点：tree.CheckedAll(true);  //传入参数 false, 取消所有结点；



使用举例:

var tree = new MyTree("Tree1", true, -1);
tree.Add(0, -1, "区域设置","","","treestyle/folder.png");
//nodeId, nodePId, nodeTxt, nodeUrl, nodeTarget, nodeImg
tree.Add(1,0,"中国","","","treestyle/folder.png");
tree.Add(2,0,"美国","","","treestyle/folder.png");
tree.Add(3,1,"四川","","","treestyle/folder.png");
tree.Add(4,3,"成都","http://www.sina.com","_blank","treestyle/folder.png");
tree.Add(5,1,"重庆","","","");
tree.Add(6,3,"南充","","","");
tree.Add(7,2,"纽约","","","");
tree.Add(8,2,"纽约8","","","");
tree.Add(9,2,"纽约9","","","treestyle/folder.png");
tree.Add(10,2,"纽约10","","","treestyle/folder.png");
tree.Add(11,2,"纽约11","","","");
tree.Add(12,2,"纽约12","","","treestyle/folder.png");
tree.Add(13,4,"皮县","","","");
tree.Add(14,4,"双流","","","");
tree.Add(15,4,"新都","","","");
tree.Add(16,4,"青白江","","","");
tree.Add(17,4,"温江","","","");
tree.Add(18,6,"南部","","","");
tree.Add(19,6,"阆中","","","");
tree.Add(20,6,"仪陇","","","treestyle/folder.png");
tree.Add(21,6,"西充","","","");

tree.Show();


JS源码：

/*
	
*/

var TREENODE_LEVEL_WIDTH = 20;  
 
function MyTreeNode(nodeId, nodePId, nodeTxt, nodeUrl, nodeTarget, nodeImg){
    this.NodeType = 1;
	this.NodeId = nodeId;
	this.NodePId = nodePId;
	this.NodeTxt = nodeTxt;
	this.NodeUrl = nodeUrl;
	this.NodeTarget = nodeTarget;
	this.NodeImg = (nodeImg.length > 0) ? (WEBURL+ nodeImg) : "";
	
	this.NodeLevel = 0;
	this.HasChildren = false;
	this.NodeExpanded = false;
	this.NodeChecked = 0; //0=false,1=true,2=part
	
	//HTML
	this.DIV_NodeBar = document.createElement("DIV");
	this.DIV_NodeBar.className = "nodeBar"; 
	
	this.DIV_NodeLevel = document.createElement("DIV");
	this.DIV_NodeLevel.className = "nodeLevel";	
	
	this.DIV_NodeFlag = document.createElement("DIV");
	this.DIV_NodeFlag.className = "nodeFlag";	
	this.DIV_NodeFlag.id = "nf" + this.NodeId;	
		
	this.DIV_NodeImg = document.createElement("DIV");	
	this.DIV_NodeImg.className = "nodeImg";
	if((this.NodeImg != null) && (this.NodeImg.length > 0)){		
		var img = document.createElement("IMG");
		img.src = this.NodeImg;
		img.style.width = "16px";
		img.style.height = "16px";
		this.DIV_NodeImg.appendChild(img);
	} 
	
	//checkbox
	this.DIV_Checkbox = document.createElement("DIV");	
	
	//text
	this.DIV_NodeTxT = document.createElement("DIV");
	this.DIV_NodeTxT.className = "nodeTxt";	
	if((this.NodeUrl == null) || (this.NodeUrl.length < 1)){	
		this.DIV_NodeTxT.appendChild(document.createTextNode(this.NodeTxt));	
	}else{
		var A = document.createElement("A");
		A.target = this.NodeTarget;
		A.href = this.NodeUrl;
		A.onfocus = function(){
		    this.blur();
		}		
		A.appendChild(document.createTextNode(this.NodeTxt));	
		this.DIV_NodeTxT.appendChild(A);	
	}

	//--------------------
	this.DIV_NodeBar.appendChild(this.DIV_NodeLevel);
	this.DIV_NodeBar.appendChild(this.DIV_NodeFlag);
	this.DIV_NodeBar.appendChild(this.DIV_NodeImg);
	this.DIV_NodeBar.appendChild(this.DIV_Checkbox);
	this.DIV_NodeBar.appendChild(this.DIV_NodeTxT);
}

function MyTree(treeId){
	this.TreeBar = document.getElementById(treeId);
	if(this.TreeBar == null) 
	{
		this.TreeBar = document.createElement("DIV");
		document.documentElement.appendChild(this.TreeBar);
	}
	
	this.TreeBar.className = "treebar";	

	this.IsCheckbox = (arguments.length > 1) ? arguments[1] : false;
 	this.NodePId = (arguments.length > 2) ? arguments[2] : 0;	
	this.Nodes = new Array();			
	this.Created = false;
	this.SelectedNode = null;
	 
	return this;
}

MyTree.prototype.Add = function(nodeId, nodePId, nodeTxt, nodeUrl, nodeTarget, nodeImg){
	var node = new MyTreeNode(nodeId, nodePId, nodeTxt, nodeUrl, nodeTarget, nodeImg); 
	this.Nodes.push(node);
	
	var tree = this;
	node.DIV_NodeBar.onmouseover = function(){
		if(tree.SelectedNode == this) return false;
		this.className = "nodeBarOver";
	}
	node.DIV_NodeBar.onmouseout = function(){
		if(tree.SelectedNode == this) return false;
		this.className = "nodeBar";
	}		
	node.DIV_NodeBar.onclick = function(){
		if(tree.SelectedNode == this) return true;
		this.className = "nodeBarSelected";
		if(tree.SelectedNode != null) tree.SelectedNode.className = "nodeBar";
		tree.SelectedNode = this;
	}		
		
	this.Created = false;
}

MyTree.prototype.AddSplitor = function(nodeId, nodePId){
	var node = new Object();	 
	this.Nodes.push(node);
	
    node.NodeId = nodeId;
	node.NodePId = nodePId; 
	node.NodeLevel = 0;
	node.NodeType = 2;
	
	//HTML
	node.DIV_NodeBar = document.createElement("DIV");
	node.DIV_NodeBar.className = "nodeSplitor"; 	
		
	this.Created = false;
}



MyTree.prototype.ShowChildren = function(prtNode){
	var node = null;
	for(var i = 0; i < this.Nodes.length; i++){
		node = this.Nodes[i];
		if(node.NodePId == prtNode.NodeId){
			node.DIV_NodeBar.style.display = "block";
			node.NodeExpanded = false;
			if(node.HasChildren) this.SetNodeFlagStyle(node);
			//this.ShowChildren(node); //
		}
	}
}

MyTree.prototype.HideChildren = function(prtNode){
	var node = null;
	for(var i = 0; i < this.Nodes.length; i++){
		node = this.Nodes[i];
		if(node.NodePId == prtNode.NodeId){
			node.DIV_NodeBar.style.display = "none";
			node.NodeExpanded = false;
			if(node.HasChildren) {
				this.SetNodeFlagStyle(node);
				this.HideChildren(node); //
			}
		}
	}
}

MyTree.prototype.SetNodeFlagStyle = function(node){	
	//MyDebug_WriteLn(node.NodeTxt + " " + node.NodeExpanded);
	if(node.NodeExpanded == true){			 				
		node.DIV_NodeFlag.className = "nodeSub";		
	}
	else{				
		node.DIV_NodeFlag.className = "nodePlus";			
	}	
}

MyTree.prototype.SetCheckbox = function(node){ 
 	switch(node.NodeChecked){
 		case 0: node.DIV_Checkbox.className = "nodeCheck"; break;
 		case 1: node.DIV_Checkbox.className = "nodeChecked"; break;
 		case 2: node.DIV_Checkbox.className = "nodeChecked_part"; break; 
 	} 
}

MyTree.prototype.ChildrenIsChecked = function(prtNode, nd){
	var node = null;
	for(var i = 0; i < this.Nodes.length; i++){
		node = this.Nodes[i];
		if((node.NodeId != nd.NodeId) && (node.NodePId == prtNode.NodeId)){
			//MyDebug_WriteLn("Node="+ node.NodeTxt + ", Checked=" + node.NodeChecked);
			if(node.NodeChecked != 1) return false;
			this.ChildrenIsChecked(node, prtNode);
		}
	}
	return true;
}

MyTree.prototype.SetChildrenCheckbox = function(prtNode){
	var node = null;
	for(var i = 0; i < this.Nodes.length; i++){
		node = this.Nodes[i];
		if(node.NodePId == prtNode.NodeId){
			node.NodeChecked = prtNode.NodeChecked;
			this.SetCheckbox(node);
			this.SetChildrenCheckbox(node);
		}
	}
}

MyTree.prototype.SetParentCheckbox = function(node){
	var prtNode = null;
	var nodeChecked = false;
	
	//MyDebug_WriteLn("NodeChecked = " + node.NodeChecked);
	
	for(var i = 0; i < this.Nodes.length; i++){
		prtNode = this.Nodes[i];
		if(prtNode.NodeId == node.NodePId){
			nodeChecked = this.ChildrenIsChecked(prtNode, node);			
		 
		 //MyDebug_WriteLn("ChildrenIsChecked = " + nodeChecked + " ParentChecked = " + prtNode.NodeChecked);
			if(nodeChecked){
				prtNode.NodeChecked = (node.NodeChecked == 1) ? 1 : 2;				
			}else{
				prtNode.NodeChecked = (node.NodeChecked == 1) ? 2 : node.NodeChecked;
			}			
			this.SetCheckbox(prtNode);			
			this.SetParentCheckbox(prtNode);
		}
	}
}

MyTree.prototype.SetNodeStyle = function(node){	
	//MyDebug_WriteLn(node.NodeTxt + " = " + node.HasChildren);
    
    if(node.NodeType != 1) return;
 
	node.DIV_NodeBar.className = "nodeBar";
	node.DIV_NodeBar.style.display = "block";		
	node.DIV_NodeFlag.className = "nodeSub";	 
	node.NodeExpanded = true;
	
	var tree = this;
	if(node.HasChildren == true){		
		node.DIV_NodeFlag.onclick = function(){	
			node.NodeExpanded = !node.NodeExpanded;
			tree.SetNodeFlagStyle(node);
			if(node.NodeExpanded){
				tree.ShowChildren(node);				
			}else{
				tree.HideChildren(node);	
			}				 				
		}
	}
	else{				
		node.DIV_NodeFlag.className = "nodeFlag";				
	}
	
	//是CHECKBOX
	if(this.IsCheckbox){ 		
		node.DIV_Checkbox.className = "nodeCheck";
		node.DIV_Checkbox.style.display = "block";			
		node.DIV_Checkbox.onclick = function(){						
			node.NodeChecked = (node.NodeChecked == 0) ? 1 : 0;
			tree.CheckedValues = "";
			tree.SetCheckbox(node);
			tree.SetChildrenCheckbox(node);
			tree.SetParentCheckbox(node);					 			
		}
	}else{				 
		node.DIV_Checkbox.style.display = "none";			
	}	
}

MyTree.prototype.AddChildren = function(nodePId, nPrtLevel){
	var node = null;
	var nChildNum = 0;
	for(var i = 0; i < this.Nodes.length; i++){
		node = this.Nodes[i];
		if(node.NodePId == nodePId){
		    if(node.NodeType == 1){
			    node.NodeLevel = nPrtLevel + 1;
			    node.DIV_NodeLevel.style.width = (node.NodeLevel * TREENODE_LEVEL_WIDTH) + "px";		
			}		
			this.TreeBar.appendChild(node.DIV_NodeBar);
			
			nChildNum++;
			node.HasChildren = this.AddChildren(node.NodeId, node.NodeLevel) > 0;			 
			this.SetNodeStyle(node);
		}
	}
	return nChildNum;
}

MyTree.prototype.Create = function(){
	MyClearChildren(this.TreeBar);
	
	
	this.TreeBar.style.display = "block";		
	
	this.AddChildren(this.NodePId, -1);	
} 

MyTree.prototype.Show = function(){
	if(this.TreeBar == null) return false;		
	if(this.Created == false) this.Create();	
}

MyTree.prototype.ShowAll = function(prtNode){
	var node = null;
	this.SetNodeFlagStyle(prtNode); 
	for(var i = 0; i < this.Nodes.length; i++){
		node = this.Nodes[i];
		if(node.NodePId == prtNode.NodeId){
			node.NodeExpanded = prtNode.NodeExpanded;
			node.DIV_NodeBar.style.display = node.NodeExpanded ? "block" : "none";	
			//alert(node.NodeTxt);
			if(node.HasChildren) {
				this.SetNodeFlagStyle(node);
				this.ShowAll(node);
			}
		}
	}
}

MyTree.prototype.FullExpand = function(){
	for(var i = 0; i < this.Nodes.length; i++){
		node = this.Nodes[i];
		if(node.NodePId == this.NodePId){
			node.NodeExpanded = true;				
			if(node.HasChildren) this.ShowAll(node);	 				
		}
	}
}

MyTree.prototype.FullCollapse = function(){
	for(var i = 0; i < this.Nodes.length; i++){
		node = this.Nodes[i];
		if(node.NodePId == this.NodePId){
			node.NodeExpanded = false;	 
			if(node.HasChildren) this.ShowAll(node);	 
		}
	}
}

MyTree.prototype.GetCheckedValues = function(){
	if(this.IsCheckbox == false) return "";
	var node = null;
	var str = "";
	for(var i = 0; i < this.Nodes.length; i++){
		node = this.Nodes[i];
		if(node.NodeChecked != 0){
			str += ("," + node.NodeId);
		}
	}
	
	if(str.length > 0) str = str.substring(1,str.length);
	return str;	
}

MyTree.prototype.CheckedAll = function(chked){
	if(this.IsCheckbox == false) return false;
	var node = null;
 
	for(var i = 0; i < this.Nodes.length; i++){
		node = this.Nodes[i];
		node.NodeChecked = chked ? 1 : 0;
		this.SetCheckbox(node);
	}	
 
	return true;		
}

MyTree.prototype.GetNode = function(nodeId){
	var node = null;
	for(var i = 0; i < this.Nodes.length; i++){
		node = this.Nodes[i];
		if(node.NodeId == nodeId) return node;
	}		
	return null;	
}

MyTree.prototype.SetCheckedNodes = function(nodeIds){

    this.CheckedAll(false);
    
	if((nodeIds==null) && (nodeIds.length < 1)) return false;
	var ndIds = nodeIds.split(",");
	if(ndIds == null) return false;	
	
	var node = null;
	for(var i = 0; i < ndIds.length; i++){
		node = this.GetNode(ndIds[i]);		 
		if(node != null){
			node.NodeChecked = 1;
			this.SetCheckbox(node);
		}
	}
}


CSS源码：

.treebar{	
	margin: 0px;
	padding: 0px;
	border-style: solid;
	border-width: 1px;
	border-color: #cccccc;
	
	font-family: 宋体;
	font-size: 12px;	
}

.nodeBar{	
	clear: both;
	height: 20px;
	background: #ffffff;	
}

.nodeSplitor{
	clear: both;
	display: block;	
	width: 100%;
	height: 1px;
	margin-top: 1px;
	margin-bottom: 3px;
	
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-bottom-color: #cccccc;
}

.nodeBarSelected{
	clear: both;
	height: 20px;
	background: #ffc06f; /*url(itemover.png) repeat-x;	*/	
}

.nodeBarOver{
	clear: both;
	height: 20px;
	background: url(itemover.png) repeat-x;				
	
	
}

.nodeFlag{
	float: left;
	width: 12px; 
	height: 100%;
		
/*	
	border-style: solid;
	border-width: 1px;
	border-color: red;
	 */	
}

.nodePlus{
	float: left;
	width: 12px; 
	height: 100%; 
	background: url(plus.png) 2px 7px no-repeat;
	cursor: pointer;
	
	/*
	border-style: solid;
	border-width: 1px;
	border-color: red;
	 */		
}

.nodeSub{
	float: left;
	width: 12px; 
	height: 100%; 
	background: url(sub.png) 2px 7px no-repeat;
	cursor: pointer;
	
	/*
	border-style: solid;
	border-width: 1px;
	border-color: red;
	 */		
}

.nodeLevel{
	float: left;
	height: 100%;
	width: 6px;
	
	/*
	border-style: solid;
	border-width: 1px;
	border-color: red;
	 */
} 

.nodeImg{
	float: left;	
	width: 18px;	
	padding-left: 3px;
	padding-top: 3px; 	
	
	/*
	border-style: solid;
	border-width: 1px;
	border-color: red;
	 */	
} 

/*------------------ Checkbox style -------------------------------- */
.nodeCheck{
	float: left;
	width: 20px;
	height: 100%;
	background: url(check_no.png) 0px 3px no-repeat;
}

.nodeChecked{
	float: left;
	width: 20px;
	height: 100%;
	background: url(checked.png) 0px 3px no-repeat;
}

.nodeChecked_part{
	float: left;
	width: 20px;
	height: 100%;
	background: url(checked_part.png) 0px 3px no-repeat;
}

/*------------------ NodeText style -------------------------------- */
.nodeTxt{
	float: left; 
	height: 22px; 
	color: #000000;
	padding-top: 2px;
	
	/*
	border-style: solid;
	border-width: 1px;
	border-color: red;
	 */	
}

.nodeTxt A{
	color: #004276;
	text-decoration: none;
	
	/*
	border-style: solid;
	border-width: 1px;
	border-color: red;
	 */	
}

.nodeTxt A:hover 
{
	text-decoration: underline;
	color: #ba2636;
}







tianmengtm
关注
专栏目录
js实现的文件树（带选框）
just_for_your_smile的专栏
11-20 1836
先贴一发效果图 代码 //准备渲染的数组 var data = { code: 200, data: [ { children: [], name: "词库管理", }, { children: [ { children: [ ], name: "模型列表", } ], name: "智能分
带选择框树
06-21
"带选择框树"是一种常见的用户界面元素，广泛应用于数据管理、配置设置或文件系统浏览等场景。在软件开发中，这种数据结构结合了树形结构的层次展示和复选框的功能，允许用户以视觉友好的方式对节点进行批量选择、...
带复选框JS树 Javascript树 JS树 树形菜单
07-13
带复选框JS树 Javascript树 JS树 树形菜单
带选择框的JS树控件
技术交流
10-14 164
前阵子自己写了个带选择框的tree控件，虽然还有一些bug没有修改（动态添加节点），但是感觉加载速度还可以。 子节点检索的方法参考了MzTree，测试了一下发现用正则去查找子节点的确比循环快了不少。 节点有三种状态，选中，未选中，未完全选中。 虽然引了一个jquery.js 但其实jquery只是用来在离开页面的时候把tree的变量delete一下（如果不delete一...
JavaScript树型级联选择功能实现全解析
最新发布
weixin_36474966的博客
10-10 795
本文还有配套的精品资源，点击获取 简介：本文将详细介绍如何使用JavaScript实现树型级联选择功能，这是一种在构建用户界面时广泛需求的功能，例如在文件管理系统和导航菜单中。我们将探讨如何通过递归处理JSON数据结构，创建DOM元素，并实现节点的点击事件监听和状态管理。实例代码将展示如何构建树结构、处理节点展开与折叠，以及初始化树组件到页面中。此外，也会考虑到用户体验和功...
带选择框的JS树控件2 （为JSTree再次提速）
relucent的专栏
10-14 252
以前写过一个带选择框的JS树控件 但是当时发现一个问题，第一次选中根节点会明显感觉卡一下。 那是因为子节点的数据还没有生成，选中根节点的话需要初始化全部数据。(那个tree有5000个节点) 于是我思考一个问题，如何让多节点树的页面达到更快的效率。 经过测试发现，JSTree的主要效率瓶颈在两个地方。 1.页面HTMLElement的创建 2.树子节点的检索 页面创建一个HTMLElement是...
带复选框JS树，JS带复选框的列表，很好用
11-27
带复选框JS树 复选框树，很好用！JS权限树，带例子
jQuery树形插件下拉列表选择框
06-24
本文将详细探讨"jQuery树形插件下拉列表选择框"这一主题，以及如何利用jQuery实现这样的功能。 首先，"jQuery树形插件"是一种将数据以树状结构展现的组件，它通常用于组织层次化的信息，例如文件目录结构或组织架构...
bootstrap treeview 树形菜单带复选框及级联选择功能
08-27
Bootstrap Treeview 树形菜单带复选框及级联选择功能 Bootstrap Treeview 是一个基于 Bootstrap 框架的树形菜单插件，提供了树形菜单带复选框及级联选择功能。该插件可以帮助开发者快速创建树形菜单，并提供了丰富...
js实现TreeView带复选框的联动
12-09
用js实现TreeView复选框的联动，选择父子点，子节点全部选中，选中子节点，父节点选中，取消全部子节点，父节点取消选中
jsp+js带单选复选框的动态树
11-29
jsp+js带单选复选框的动态树，我用的是oracle数据。
带复选框的js树
12-12
带复选框的js树
js实现树形图
09-03
简单易用的js实现树形图，适于通用目录树。现成源码，直接使用。
带有复选框的JS树状菜单
01-24
这个是带有复选框的JS树状菜单，免费给大家分享下
js 静态树形结构(包含有复选框和无复选框)
12-02
这个树的组件主要有： 几个js文件 1个css文件 用户自己的数据文件，可以搞成js文件形式，也可以在java程序中写好，传给jsp。
原生js手写tree树形分类选择插件
05-06
原生js结合jquery手写树形插件，详解编码思路，具体可使用示例，下载即可使用
js原生实现树选择
weixin_43828291的博客
03-27 1090
js实现树选择的方案
select 框添加树结构（todu）
CMDN123456的博客
07-04 1086
el-select 插入树结构
[JavaScript实战]选中逻辑js(常见左侧选择菜单树)
学生董格
04-28 1348
//jsp中写入 &lt;input type="checkbox" id="ifchecked" name="ifchecked" value="选中逻辑"&gt; &lt;input type="hidden" id="RequestId" value="123456"&gt;//js中写入 //左侧菜单选中逻辑 //获取当前
html选择框 树结构,带复选框tree树结构插件MultipleTreeSelect.js
06-06
好的，我了解你的问题了。关于你提到的 MultipleTreeSelect.js 插件，它是一个基于 jQuery 的树形选择框插件，可以实现树形结构的多选功能。使用这个插件需要在页面中引入 jQuery 库和 MultipleTreeSelect.js 文件，并按照插件文档的要求进行配置和调用即可。 具体来说，你需要在页面中创建一个 HTML 元素作为选择框的容器，然后在 JavaScript 中调用 MultipleTreeSelect 函数来初始化插件。你可以通过配置参数来指定选择框的数据源、树形结构的样式、选项的默认值等等。此外，插件还提供了一些事件回调函数，可以在用户选择或取消选择选项时触发，以便你在代码中进行后续处理。 总之，如果你需要在页面中实现一个带有树形结构和多选功能的选择框，那么 MultipleTreeSelect.js 插件是一个不错的选择。但是请注意，这个插件可能会受到浏览器的兼容性限制，因此在使用之前请务必进行充分的测试。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值