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

bootstrap无限级分类 jq拓展之前的无限级分类的封装版~的更多相关文章

OC的类别(分类)和拓展
一.分类: 1.适用范围当你已经封装好了一个类(也可能是系统类.第三方库),不想在改动这个类了,可是随着程序功能的增加需要在类中增加一个方法,这时我们不必修改主类,只需要给你原来的类增加一 ...
day81:luffy:课程分类页面&课程信息页面&指定分类显示课程信息&分页显示课程信息
目录 1.构建课程前端初始页面 2.course后端的准备工作 3.后端实现课程分类列表接口 4.前端发送请求-获取课程分类信息 5.后端实现课程列表信息的接口 6.前端显示列表课程信息 7.按照指定 ...
多分类问题中，实现不同分类区域颜色填充的MATLAB代码（demo：Random Forest）
之前建立了一个SVM-based Ordinal regression模型,一种特殊的多分类模型,就想通过可视化的方式展示模型分类的效果,对各个分类区域用不同颜色表示.可是,也看了很多代码,但基本都是 ...
Spark ML下实现的多分类adaboost+naivebayes算法在文本分类上的应用
1. Naive Bayes算法朴素贝叶斯算法算是生成模型中一个最经典的分类算法之一了,常用的有Bernoulli和Multinomial两种.在文本分类上经常会用到这两种方法.在词袋模型中,对于一 ...
APP的功能分类及打包与发布的分类方式
智能手机的出现改变了我们的生活,同时各种各样的APP充斥在我们的手机当中.那么我先现在在来熟悉一下APP的分类及其用途:工具类.社交类.信息类.娱乐类.生活类等几大类.我么了解了APP的用途分类,那么 ...
foreach、count、explode（对无限级分类的语法注释-显示无限级效果）
foreach ($array as $key => $value) foreach仅能用于数组. 每次循环中,当前单元的键名也会在每次循环中被赋给变量$key. 当前单元的值被赋给$value ...
jQuery：用 lightTreeview 实现树形分类菜单的功能展开收缩分类代码
最近在做前端开发项目中,需要用到树形结构.在网上查阅到了许多相应资源.其中觉得lightTreeview是一款非常不错的JQ树形分类菜单代码,结构简单,支持多级.还有详细的参数可以配置,以实现各种效果 ...
Tensorflow二分类处理dense或者sparse(文本分类)的输入数据
这里做了一些小的修改,感谢谷歌rd的帮助,使得能够统一处理dense的数据,或者类似文本分类这样sparse的输入数据.后续会做进一步学习优化,比如如何多线程处理. 具体如何处理sparse 主要是使 ...
ECSHOP分类页面筛选功能（按分类下子分类和品牌筛选）
其实分类页面里面本来就有相关的品牌.属性.分类的筛选功能在category.php和模板加上相应的功能即可 1.读出当前分类的所有下级分类 $chlidren_category = $GLOBALS[ ...

随机推荐

WaitType：SOS_SCHEDULER_YIELD
今天遇到一个query,处于SOS_SCHEDULER_YIELD 状态,physical IO 不增加,CPU的使用一直在增长.当一个sql query长时间处于SOS_SCHEDULER_YIEL ...
SQL Server中In-Flight日志究竟是多少
在SQL Server中,利用日志的WAL来保证关系数据库的持久性,但由于硬盘的特性,不可能使得每生成一条日志,就直接向磁盘写一次,因此日志会被缓存起来,到一定数据量才会写入磁盘.这部分已经生 ...
【求助】WPF 在XP下有的Textbox光标会消失
最近做个项目,一直有一个问题没有解决,就是在XP下,有的Textbox里在文本框里没有东西的时候,会没有光标.不同的XP机器,失去光标的Textbox也不一样. 各位大师看下面的三张图,当Textbo ...
Android音频开发之AudioTrack实时播放
前言: 其实在Android中录音可以用MediaRecord录音,操作比较简单.但是不能对音频进行处理.考虑到项目中做的是实时语音只能选择AudioRecord进行录音.然后实时播放也只能采用Aud ...
MySQL线程池
MySQL线程池只在Percona,MariaDB,Oracle MySQL企业版中提供.Oracle MySQL社区版并不提供. 在传统方式下,MySQL线程调度方式有两种:每个连接一个线程(one ...
DevExpress控件安装、汉化使用教程
前言 DevExpress是一个庞大的控件库,也很是好用(没用过,听说),但是要收费. 网上关于DevExpress的教程满天飞,我找了一下午也没找到正确的安装.简单实用教程,还是自己摸索吧. 自己动 ...
2015-10-22 前思后想，决定重构表结构，免得这个APP死在数据表设计上
新的设计稿出来了,如下,原来旧的是第二张 ------- 原来的评论级数只有2级,现在是不限,2级的意思是,用户评论该帖是一级,用户的评论能被人评论,这是第2级,评论评论的评论不能够再被 ...
android 之 ListView 里面嵌套 GridView 遇到的问题及其解决方法。
我们直接入主题.所有问题例子请参照下图 1,怎样使图片具有点击事件? 答: 解决方法: 在你的BaseAdapter里面不要设置下面这三个东西,然后再设置GridView的onItemClick. g ...
关于在用curl函数post网页数据时，遇上表单提交 type为submit 类型而且没有name和id时可能遇到的问题及其解决方法
curl函数库实现爬网页内容的链接在 http://www.cnblogs.com/linguanh/p/4292316.html 下面这个是没有name和id 标识的 <input type= ...
js 获取当前的时间
第一个小程序,用js获取当前的时间,,比较特殊的是月是从0开始算的,显示的时候要加1,获取日用getDate(),获取周 getDay(), 直接上代码 <!DOCTYPE html> ...

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

bootstrap无限级分类 jq拓展 之前的无限级分类的封装版~的更多相关文章

随机推荐

热门专题

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

bootstrap无限级分类 jq拓展之前的无限级分类的封装版~的更多相关文章