树状列表

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="width: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
        }
    }
}

　　

原文地址：https://www.cnblogs.com/xiaohaihuaihuai/p/8459412.html

时间： 2024-11-08 05:37:26

树状列表的相关文章

GTK+中的树状列表构件(GtkTreeView)

GTK+中的树状列表构件(GtkTreeView) 在本章的GTK+程序设计教程中,我们将向大家重点介绍非常常用也有点复杂的构件--GtkTreeView . GtkTreeView?构件是一个高级的构件,利用他你就可以制作出漂亮的普通列表或者是树状的列表.这个构件里可以包含一或者多行.他的构架呢?正是采用了大名鼎鼎的MVC (Model View Controller) 设计框架.也就是说数据和显示方式是进行了一种分离的操作. 之前我们有说过复杂这个问题,于是在GtktreeView构件中确实

LigerUI 树状列表折叠显示

http://blog.csdn.net/haojuntu/article/details/8626040 —————————————————————————————————————————————————————————————————————————— function InitGrid(arrButtons) { //加载 菜单管理数据 $.post("Ajax_Menu.aspx", { view: 'ManageMenu' }, function(data) { gridRi

Android中的树状(tree)列表

树状列表前端挺常用的,还有人专门写过Ztree,Android中有的时候也需要使用到树状列表,上篇文章写了一下ExpandableListView,ExpandableListView最多支持两级结构,Android中没有三层结构的组件,这个时候需要自己去扩展,可以扩展ExpandableListView,也可以选择扩展ListView.个人觉得扩展ListView更简单一点,多级列表你可以一次性加载出来,也可以分级加载出来,一般分级比较好,点了某一级可以控制点击事件然后去加载子级,这样实现起来

jquery-treegrid树状表格的使用（.Net平台）

上一篇介绍了DataTable,这一篇在DT的基础之上再使用jquery的一款插件:treegrid,官网地址:http://maxazan.github.io/jquery-treegrid/ 一.使用treegrid,需要以下支持 jquery.min.js+jquery.treegrid.min.js 二.后端提供树状列表格式的集合数据,借助前端的DT的配置控制,来在页面上输出满足treegrid格式要求的html 前台: 1 @using Model 2 @{ 3 Layout = nu

OA项目11：部门列表树状显示功能及其他代码优化

首注:本学习教程为传智播客汤阳光讲师所公布的免费OA项目视频我的文字版实践笔记,本人用此来加强巩固自己开发知识,如有网友转载,请注明.谢谢. 一 使用递归使部门列表树状显示: 1.写一个工具类,实现通过顶级部门查询所有,具体如下: 1 package cn.clear.oa.util; 2 3 import java.util.ArrayList; 4 import java.util.Collection; 5 import java.util.List; 6 7 import cn.clea

Opencv研读笔记:haartraining程序之cvCreateCARTClassifier函数详解（CART树状弱分类器创建）~

cvCreateCARTClassifier函数在haartraining程序中用于创建CART树状弱分类器,但一般只采用单一节点的CART分类器,即桩分类器,一个多节点的CART分类器训练耗时很多.根据自己的测试,要等差不多10分钟(2000正样本.2000负样本)才能训练完一个3节点的弱分类器,当然,总体的树状弱分类器的数目可能也会减少1/2.之所以将此函数拿出来说说,主要是因为在网上找不到针对这个函数的详细说明,同时,CART的应用十分广泛,自己也趁这个机会好好学学,把自己的一点理解分享给

Linux 目录详解 树状目录结构图

1.树状目录结构图 2./目录 目录 描述 / 第一层次结构的根.整个文件系统层次结构的根目录. /bin/ 需要在单用户模式可用的必要命令(可执行文件):面向所有用户,例如:cat.ls.cp,和/usr/bin类似. /boot/ 引导程序文件,例如:kernel.initrd:时常是一个单独的分区[6] /dev/ 必要设备, 例如:, /dev/null. /etc/ 特定主机,系统范围内的配置文件. 关于这个名称目前有争议.在贝尔实验室关于UNIX实现文档的早期版本中,/etc 被称为

神奇的Grails:自关联的树状Domain一行代码获取所有子节点

见证Groovy/Grails的神奇时刻到了,你相信吗?用一行代码就可以获取树状结构中某节点下的所有全部子节点!注意:这个树是无深度限制的.无深度限制这点很重要,如果有限深度的树,那我们也很容易通过层级编码用“Like 001%”方式实现(维护编码也是一个有挑战性活).我们以一个非常常见的“类别”Domain为例,大类分小类,小类再细分,典型的树形结构,看看Grails是如何以简洁的语法表达的,体验Groovy语法的神奇! class Group{ String name static hasM

Android无限级树状结构

通过对ListView简单的扩展.再封装,即可实现无限层级的树控件TreeView. 1 package cn.asiontang.nleveltreelistview; 2 3 import android.annotation.TargetApi; 4 import android.content.Context; 5 import android.os.Build; 6 import android.util.AttributeSet; 7 import android.view.View