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

时间：2022-12-31 15:48:25

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

相关文章