您的位置: 首页  >  IT文章  >  .NET相关  >  bootstrap无限级归类 jq拓展 之前的无限级分类的封装版

bootstrap无限级归类 jq拓展 之前的无限级分类的封装版

分类: IT文章 • 2024-11-19 08:29:25
bootstrap无限级分类 jq拓展 之前的无限级分类的封装版~

git地址：https://github.com/zhangjiahao93/jQ.select

HTML部分

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>多级联动封装</title>
    <link href="./css/bootstrap.css" rel="stylesheet">
    <script src="./js/jquery.js"></script>
    <script src="./js/duoji.js"></script>
</head>
<body>

<div class="row" style="margin:100px auto;">
    <div class="col-md-12" id="box"></div>  
</div>
<div class="row" style="margin:100px auto;">
    <div class="col-md-12" id="box2"></div>  
</div>

<script>
    //基础用法
    $.select({boxName:'box'})
    //详细配置
    $.select({
        boxName:'box2',
        className:'area2',
        url:'./area.php',
        type:'get',    
        dataType:'json',
    })
    
    /*
        boxName:'box',      //容器名
        className:'area',    //每个事件的定位class
        url:'./area.php',    //请求的地址
        type:'get',            //请求传输方式
        dataType:'json',    //使用jsonp方式
    */
    
</script>

</body>
</html>

 

duoji.js 代码

(function ($) {
    $.select=function(config){
        var i=new select;
        return i.init(config)
    }
    //声明多级联动 方法类
    var select = new Function();
    select.prototype={
        //定义类属性
        init:function(config){
            /**
             * 这些是预定义属性
             */
            this.boxName='box';                //容器名
            this.className='area';          //每个事件的定位class
            this.url='./area.php';          //默认选项

            //this.classObj=$("."+className); //每个事件的定位class 的对象 --基本没用所以废除了
            this.type= 'get';                //传输方式
            this.dataType='json';             //使用jsonp方式
            
            //解包解出配置信息 覆盖上面的属性
            for(var key in config){
                this[key] = config[key];
                //console.log(key+':'+config[key]+' this.key:'+this.key);
            }
            //console.log(this.boxName);
            
            var boxName=this.boxName;
            this.box=$('#'+boxName);        //需要添加元素的容器
            
            //最后创建
            this.create();                    //新建一个select获取 
        },
        
        create:function(){
            //声明外部变量
            var boxName=this.boxName;
            var className= this.className;
            var box=this.box;
            var url=this.url;
            var obj=this;
            var type=this.type;
            var dataType=this.dataType;
            
            
            $.ajax({
              type: type,
              dataType:dataType,
              url: url,
              data: {id:'0'},
              sync: true,//设置异步模式
              success: function(data){
                var option="<option value=''>请选择</option>";
                var list=data.data;
                for(var key in list){
                    option+="<option value='"+key+"'>"+list[key].areaname+"</option>";
                }
                $('<div class="col-md-2 pl0"><select name="'+className+'[]" num="0" class="form-control input-sm '+className+'">'+option+'</select></div>').appendTo(box).find('select').bind('change',function(){obj.change($(this))});
              }
           });
            
        },
        
        //change事件
        change:function(event){
            //声明 

            var box =this.box;                    //获取所有插入盒子的对象
            var className=this.className        //获取模型的className
            
            var classObj=$('.'+className);        //获取所有Class所在元素组 这里要在注意 重新生成classObj 因为他是动态的
            var num=classObj.index($(event))+1; //获取num的值
            //console.log(classObj.index($(event)));
            
            var id=$(event).val();                //获取ajax发送id的头
            var obj=this;                        //代表这个方法            
            var url=this.url;                    //url地址            
            
            var type = this.type;                //传输方式
            var dataType=this.dataType;            //数据类型
            
            //清除 后续添加的新的元素
            classObj.each(function(){
                //console.log(event);
                //这里的this 代表eClass 遍历时的单个对象
                if($(this).attr('num')>$(event).attr('num')){
                    $(this).parent().remove();
                }
            });

            //循环ajax方法
            $.ajax({
              type: type,
              dataType:dataType,
              url: url,
              data: {id:id},
              sync: true,//设置异步模式
              success: function(data){
                //console.log(data);
                var list =data.data
                if(data.state==='1'){
                    var option="<option value=''>请选择</option>";
                    for(var key in list){
                        option+="<option value='"+key+"'>"+list[key].areaname+"</option>";
                    }
                    $('<div class="col-md-2 pl0"><select name="'+className+'[]" num="'+num+'" class="form-control input-sm '+className+'" >'+option+'</select></div>').appendTo(box).find('select').bind('change',function(){obj.change(this)});
                 }
              }
           });
           
        },
        
        //查询当前盒子中的信息
        log:function(){
            var boxName=$(event).attr('pnode');  //获取触发事件者的pnode 
            var className=$(event).attr('cname');//获取触发事件者的cname
            var box =$("#"+boxName);            //获取所有插入盒子的对象
            var className=$("."+className);        //获取所有Class所在元素组
            console.log("容器名:"+boxName+"\n 触发的class名:"+className);
            
        },
        
    }
    
})(jQuery)

 

后端提供的数据类型：json

如果有数据：state=1

例子：

data:{
110000:{id: "110000", areaname: "北京", pid: "0", shortname: "北京", level: "1", position: "tr_0", sort: "1"}
120000:{id: "120000", areaname: "天津", pid: "0", shortname: "天津", level: "1", position: "tr_0", sort: "2"}
130000:{id: "130000", areaname: "河北省", pid: "0", shortname: "河北", level: "1", position: "tr_0", sort: "3"}
140000:{id: "140000", areaname: "山西省", pid: "0", shortname: "山西", level: "1", position: "tr_0", sort: "4"}
150000:{id: "150000", areaname: "内蒙古自治区", pid: "0", shortname: "内蒙古", level: "1", position: "tr_0", sort: "5"}
.....
},
state:"1"

如果没有数据 state=0

例子：

state:"0"

 

最后附上下载地址:包含php服务端的实例yo~

http://pan.baidu.com/s/1i5DG70D

相关推荐