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

Posted 2020-08-04 zjh

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了bootstrap无限级分类 jq拓展之前的无限级分类的封装版~相关的知识，希望对你有一定的参考价值。

<!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="./duoji.js"></script>
</head>
<body>

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

    <script>
        //容器名,name名（新生成的class名）
        $.select(‘box1‘,‘area1‘);
        $.select(‘box2‘,‘area2‘);
    </script>

</body>
</html>

duoji.js 代码

(function ($) {
    $.select=function(box,addInputClass){
        var i=new select;
        return i.init(box,addInputClass)
    }
    //声明多级联动 方法类
    var select = new Function();
    select.prototype={
        //定义类属性
        init:function(box,addInputClass){
            this.boxName=box;
            this.box=$(‘#‘+box);        //需要添加元素的容器
            this.eleClass=addInputClass;//每个事件的定位class
            this.first();//新建一个select获取 
        },
        
        first:function(){
            //声明外部变量
            var boxName=this.boxName;
            var eleClass= this.eleClass;
            var box=this.box;
            var obj=this;
            
            $.get("http://127.0.0.1:83/areas", {id:‘0‘},
                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="‘+eleClass+‘[]" num="0" pnode="‘+boxName+‘" cname="‘+eleClass+‘" class="form-control input-sm ‘+eleClass+‘">‘+option+‘</select></div>‘).appendTo(box).find(‘select‘).bind(‘change‘,function(){obj.change($(this))});
                
            },‘jsonp‘);
        },
        
        //change事件
        change:function(event){
            //声明
            var boxName=$(event).attr(‘pnode‘);  //获取触发事件者的pnode 
            
            var className=$(event).attr(‘cname‘);//获取触发事件者的cname
            
            var box =$("#"+boxName);            //获取所有插入盒子的对象
            
            var eleClass=$("."+className);        //获取所有Class所在元素组

            var num=eleClass.index($(event))+1; //获取num的值
            
            var id=$(event).val();                //获取ajax发送id的头
            
            var obj=this;                        //代表这个方法
            
            //清除 后续添加的新的元素
            eleClass.each(function(){
                //这里的this 代表eleClass 遍历时的单个对象
                //console.log($(this).attr(‘num‘));
                //console.log($().attr(‘num‘));
                if($(this).attr(‘num‘)>$(event).attr(‘num‘)){
                    $(this).parent().remove();
                }
            });
            /*
            console.log(boxName);
            console.log(className);
            console.log($(event));
            console.log($(event).val());
            */

            //循环ajax方法
            $.ajax({
              type: "get",
              dataType:"jsonp",
              url: "http://127.0.0.1:83/areas",
              data: {id:id},
              sync: false,//设置为同步
              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+‘" pnode="‘+boxName+‘" cname="‘+className+‘" 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 eleClass=$("."+className);        //获取所有Class所在元素组
            console.log("容器名:"+boxName+"\n 触发的class名:"+className);
            
        },
        
        //第一个select框获取信息
        getFirstElement:function(){
            var main=$(‘#‘+this.main);
            $.get("http://127.0.0.1:83/areas", {id:‘0‘},
                function(data){
                var option="<option value=‘‘>请选择</option>";
                var list=data.data;
                for(var key in list){
                    option+="<option value=‘"+key+"‘>"+list[key].areaname+"</option>";
                }
                main.html(option);
          },‘jsonp‘);
        }
    }
    
})(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"}
210000:{id: "210000", areaname: "辽宁省", pid: "0", shortname: "辽宁", level: "1", position: "tr_0", sort: "6"}
220000:{id: "220000", areaname: "吉林省", pid: "0", shortname: "吉林", level: "1", position: "tr_0", sort: "7"}
230000:{id: "230000", areaname: "黑龙江省", pid: "0", shortname: "黑龙江", level: "1", position: "tr_0", sort: "8"}
310000:{id: "310000", areaname: "上海", pid: "0", shortname: "上海", level: "1", position: "tr_0", sort: "9"}
320000:{id: "320000", areaname: "江苏省", pid: "0", shortname: "江苏", level: "1", position: "tr_0", sort: "10"}
330000:{id: "330000", areaname: "浙江省", pid: "0", shortname: "浙江", level: "1", position: "tr_0", sort: "11"}
.....
},
state:"1"

如果没有数据 state=0

例子：

state:"0"

以上是关于bootstrap无限级分类 jq拓展之前的无限级分类的封装版~的主要内容，如果未能解决你的问题，请参考以下文章

PHP面试题精讲—无限级分类/无限分类的递归算法和非递归算法-带源码建议收藏

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

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