树状列表

alvintree文件

css样式

@charset "utf-8";
.alvintree_item{ height:30px;font-size:14px; font-family:微软雅黑; text-align:left; vertical-align:middle; line-height:30px; padding:0px 5px; background-image:url(../img/close.png); background-size:20px 20px; background-repeat:no-repeat; background-position:top 5px left 5px;}
.alvintree_item_nr{ margin-left:25px;}
.alvintree_item_nr:hover{ cursor:pointer}
.alvintree_item_open{ background-image:url(../img/open.png)}
.alvintree_item span:hover{ color:red !important; cursor:pointer}
.alvintree_item:hover{ cursor:pointer}

alvintree. js文件

/*
	*造树状列表对象的方法
	*@param config 传入的配置参数
*/
var AlvinTree = function(config){
	
	var data = config.data;
	var container = config.container;
	var ishidden = config.ishidden;
	var urlopen = "../alvintree/img/open.png";//用的时候注意修改路径
	var urlclose = "../alvintree/img/close.png";//用的时候注意修改路径
	
	//显示列表
	var str = showitem(data,ishidden,0);
	$("#"+container).html(str);
	
	//为列表加点击事件
	$("#"+container+" .alvintree_item").click(function(){
		//判断该列表下有没有子集
		if($(this).next(".alvintree_item_wai").length){
			//点击显示和收起
			if($(this).next(".alvintree_item_wai").css("display")=="none"){
				//打开
				$(this).next(".alvintree_item_wai").css("display","block");
				//变图标
				$(this).css("background-image","url("+urlopen+")");
			}else{
				//收起
				$(this).next(".alvintree_item_wai").css("display","none");
				//变图标
				$(this).css("background-image","url("+urlclose+")");
			}
		}else{
			//无子集
		}
	})
	
	//点击选中的事件
	$("#"+container+" .alvintree_item span").click(function(){
		//取消其它选中
		$("#"+container+" .alvintree_item span").attr("sel",0);
		$("#"+container+" .alvintree_item span").css("color","black");
		//该项选中
		$(this).attr("sel",1);
		$(this).css("color","red");
		//阻止冒泡
		return false;
	})
	
	/*
		*获取选中项值的方法
		*@return 返回选中的值
	*/
	this.getvalue = function getvalue(){
		var v = "";
		var item = $("#"+container+" .alvintree_item span");
		for(var i=0; i<item.length;i++){
			if(item.eq(i).attr("sel")=="1"){
				v = item.eq(i).attr("tag");
			}
		}
		return v;
	}

}

/*
	*加载数据的方法
	*@param data 要显示的数据是JSON格式
	*@param indent 缩进的值，单位是像素
	*@param ishidden 是否默认隐藏子列表
	*return string 返回造好的HTML元素
*/
function showitem(data,ishidden,indent){
	//字符串
	var str = "";
	//判断是否需要隐藏
	if(indent>0 && ishidden){
		str+="<div class='alvintree_item_wai' style='display:none'>";
	}else{
		str+="<div class='alvintree_item_wai'>";
	}
	//遍历数组
	for(var k in data){
		//加载当前数组中的数据
		//判断当前数组中是否有下一级数据,如果有则为加号，没有为减号
		if(data[k].item.length>0){
			str+="<div style='margin-left:"+indent+"px' class='alvintree_item' ><span tag='"+data[k].tag+"' class='alvintree_item_nr'>"+data[k].name+"</span></div>";
		}else{
			str+="<div style='margin-left:"+indent+"px' class='alvintree_item alvintree_item_open' ><span tag='"+data[k].tag+"' class='alvintree_item_nr'>"+data[k].name+"</span></div>";
		}
		//判断当前数组中是否有下一级数据,如果有则加载
		if(data[k].item.length>0){
			str += showitem(data[k].item,ishidden,indent+30);
		}
	}
	str += "</div>";
	
	return str;
}

// ************************************************************************

/*
	*造树多选状列表对象的方法
	*@param config 传入的配置参数
*/
var AlvinTrees = function(config){
	
	var data = config.data;
	var container = config.container;
	var ishidden = config.ishidden;
	
	//显示列表
	var str = showitems(data,ishidden,0,0);
	$("#"+container).html(str);
	
	//为列表加点击事件
	$("#"+container+" .alvintree_item").click(function(){
		//判断该列表下有没有子集
		if($(this).next(".alvintree_item_wai").length){
			//点击显示和收起
			if($(this).next(".alvintree_item_wai").css("display")=="none"){
				//打开
				$(this).next(".alvintree_item_wai").css("display","block");
				//变图标
				$(this).css("background-image","url("+urlopen+")");
			}else{
				//收起
				$(this).next(".alvintree_item_wai").css("display","none");
				//变图标
				$(this).css("background-image","url("+urlclose+")");
			}
		}else{
			//无子集
		}
	})
	
	//点击选中的事件
	$("#"+container+" .alvintree_item label").click(function(evt){
		//做全选
		//取当前选中状态
		var zt = $(this).children("input").prop("checked");
		//找下面的子集
		$(this).parent(".alvintree_item").next(".alvintree_item_wai").find("input").prop("checked",zt);
		//阻止冒泡
		stopEventBubble(evt);
	})
	

	/*
		*获取选中值的方法
		*@param level代表取第几级的选中值，0代表所有 1代表第一级
		*return string 返回选中的值
	*/
	this.getvalues = function getvalues(level){
		if(level==0){
			var alls = $("#"+container+" .alvintree_item"); 
			var v = "";
			for(var i=0;i<alls.length;i++){
				if(alls.eq(i).children("label").children("input").prop("checked")){
					v +=alls.eq(i).children("label").children("input").attr("tag")+",";
					}
			}
			v = v.substr(0,v.length-1);
			return v;
		}else{
			var bs = level-1;
			var alls = $("#"+container+" .alvintree_item"+bs); 
			var v = "";
			for(var i=0;i<alls.length;i++){
				if(alls.eq(i).children("label").children("input").prop("checked")){
					v +=alls.eq(i).children("label").children("input").attr("tag")+",";
					}
			}
			v = v.substr(0,v.length-1);
			return v;
		}
		
	}
	
	/*
		*设置选中的方法
		*@param data 要选中的主键值，数组
		*@param isclear 是否选中前清除之前的选中状态 bool true是 false否
		*@param leval 代表想要让第几层的复选框选中，由于在数据库里面不同的表主键可能会重复，所以可使用第三个参数控制让第几层的选中，0代表所有 1代表第一次 2代表第二层。。。
	*/
	this.selected = function selected(data,isclear,leval){
		var alls = $("#"+container+" .alvintree_item"); 
		if(isclear){
			alls.children("label").children("input").prop("checked",false);
		}
		leval = leval || 0;
		if(leval==0){
			for(var i=0;i<alls.length;i++){
				var tag = alls.eq(i).children("label").children("input").attr("tag");
				if(data.indexOf(tag)>=0){
					alls.eq(i).children("label").children("input").prop("checked",true);
				}
			}
		}else{
			var bs = leval-1;
			var alls = $("#"+container+" .alvintree_item"+bs); 
			for(var i=0;i<alls.length;i++){
				var tag = alls.eq(i).children("label").children("input").attr("tag");
				if(data.indexOf(tag)>=0){
					alls.eq(i).children("label").children("input").prop("checked",true);
				}
			}
		}
		
		
	}
}

/*
	*加载数据的方法
	*@param data 要显示的数据是JSON格式
	*@param indent 缩进的值，单位是像素
	*@param ishidden 是否默认隐藏子列表
	*@param level 列表级别
	*return string 返回造好的HTML元素
*/
function showitems(data,ishidden,indent,level){
	//字符串
	var str = "";
	//判断是否需要隐藏
	if(indent>0 && ishidden){
		str+="<div class='alvintree_item_wai' style='display:none'>";
	}else{
		str+="<div class='alvintree_item_wai'>";
	}
	//遍历数组
	for(var k in data){
		//加载当前数组中的数据
		//判断当前数组中是否有下一级数据,如果有则为加号，没有为减号
		if(data[k].item.length>0){
			str+="<div style='margin-left:"+indent+"px' class='alvintree_item alvintree_item"+level+"' ><label class='alvintree_item_nr'><input type='checkbox' tag='"+data[k].tag+"'  />"+data[k].name+"</label></div>";
		}else{
			str+="<div style='margin-left:"+indent+"px' class='alvintree_item alvintree_item"+level+" alvintree_item_open' ><label class='alvintree_item_nr'><input tag='"+data[k].tag+"' type='checkbox'  />"+data[k].name+"</label></div>";
		}
		//判断当前数组中是否有下一级数据,如果有则加载
		if(data[k].item.length>0){
			str += showitems(data[k].item,ishidden,indent+30,level+1);
		}
	}
	str += "</div>";
	
	return str;
}

//阻止事件冒泡函数
function stopEventBubble(event)
{
    var e=event || window.event;
    if (e && e.stopPropagation)
    {
        e.stopPropagation();    
    }
    else
    {
        e.cancelBubble=true;
    }
}

 主页显示样式布局

插入css样式和js文件

<script src="../alvintree/js/alvintree.js"></script>
<script src="../alvintree/js/jquery-1.11.2.min.js"></script>
<link href="../alvintree/css/alvintree.css" rel="stylesheet" type="text/css">

 布局显示

<body>
<div id="alvintrees" style="300px;"></div>
<input type="button" value="选取中" id="btn"/>
</body>
<script type="text/javascript">
var trees;
$.ajax({
	url:"chuli.php",
	dataType:"JSON",
	success: function(data){
		trees = new AlvinTrees({
			data:data,//需要显示的数据
			container:"alvintrees",//外层容器的ID
			ishidden:true//是否默认隐藏子集
		});
	}
});
$("#btn").click(function(){
	alert(trees.getvalues(2));//1为选中所有一级栏目，2为二级栏目以此类推
	
})
</script>

 

处理页面

<?php
require_once"../DBDA.class.php";
$db = new DBDA();
$sql = "select * from bumen";
$arr = $db->query($sql);
$jsonarr = array();
foreach($arr as $v){
	$sql = "select * from yh where bumen = '{$v[0]}'";
	$yharr = $db->query($sql);
	$yhjsonarr = array();
	foreach($yharr as $vyh){
		$xiaoyharr = array(
			"name"=>$vyh[1],
			"tag"=>$vyh[0],
			"item"=>array()
		);
		$yhjsonarr[] = $xiaoyharr;
	}
	$xiaoarr = array(
		"name"=>$v[1],
		"tag"=>$v[0],
		"item"=>$yhjsonarr
	);
	$jsonarr[] = $xiaoarr;
}
echo json_encode($jsonarr);

DBDA.class.php

<?php
class DBDA{
	public $host="localhost"; //服务器地址
	public $uid="root"; //用户名
	public $pwd="123"; //密码
	public $dbname="crud"; //数据库名称
	
	/*
		执行一条SQL语句的方法
		@param sql 要执行的SQL语句
		@param type SQL语句的类型，0代表查询 1代表增删改
		@return 如果是查询语句返回二维数组，如果是增删改返回true或false
	*/
	public function query($sql,$type=0){
		$db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname);
		$result = $db->query($sql);
		if($type){
			return $result;
		}else{
			return $result->fetch_all();
		}
	}
	public function strquery($sql,$type=0){
		$db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname);
		$result = $db->query($sql);
		if($type){
			return $result;
			}else{
				$arr = $result->fetch_all();
				$str = "";
				foreach($arr as $v){
					$str .= implode("^",$v)."|";
					}
				$str = substr($str,0,strlen($str)-1);
				return $str;
				}
		}
	//返回json数据的方法
	public function jsonquery($sql,$type=0){
		$db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname);
		$result = $db->query($sql);
		if($type){
			return $result;
		}else{
			$arr = $result->fetch_all(MYSQLI_ASSOC);//关联数组
			return json_encode($arr);//转换json
			//json_decode()分解json
		}
	}
}