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[ ...

随机推荐

Yii2-多表关联的用法示例
本篇博客是基于<活动记录(Active Record)>中对于AR表关联用法的介绍. 我会构造一个业务场景,主要是测试我比较存疑的各种表关联写法,而非再次介绍基础用法. 构造场景订单ar ...
浅析z-index（覆盖顺序）和定位
多次在项目中遇到html页面元素的非期待重叠错误,多数还是position定位情况下z-index的问题.其实每次解决类似问题思路大致都是一样的,说到底还是对z-index的理解比较模糊,可以解决问题 ...
Windows下搭建MySQL Master Slave
一.背景服务器上放了很多MySQL数据库,为了安全,现在需要做Master/Slave方案,因为操作系统是Window的,所以没有办法使用keepalived这个HA工具,但是我们可以接受人工进行切 ...
Torch学习笔记1--Torch简介
Torch是什么 Torch是一个由Lua语言开发的深度学习框架,目前支持Mac OS X 和Ubuntu 12及以上,官网 ,github地址. 具有如下特点: 交互式开发工具可视化式的工具第三 ...
页面loading效果
当网页太大,打开太慢的时候,为了增加良好的用户体验(不让用户眼巴巴的等,心中暗骂c,这么慢),我们需要加一个等待动画. 只需把以下代码加入页面中即可,图片可以根据自己的需求更换,更换图片之后需要改变l ...
java中动态代理实现机制
前言: 代理模式是常用的java设计模式,它的特征是代理类与委托类有同样的接口,代理类主要负责为委托类预处理消息.过滤消息.把消息转发给委托类,以及事后处理消息等.代理类与委托类之间通常会存在关联关系 ...
我被比特币撞了一下腰——记OKCoin试用体验
本博客还有大量的.NET开源技术文章,您可能感兴趣: 1.开源Math.NET基础数学类库使用系列文章:链接 2.开源C#彩票数据资料库系列文章:链接 3.开源的.NET平台ORM组件文章:链接 4. ...
ASP.NET MVC下的四种验证编程方式
ASP.NET MVC采用Model绑定为目标Action生成了相应的参数列表,但是在真正执行目标Action方法之前,还需要对绑定的参数实施验证以确保其有效性,我们将针对参数的验证成为Model绑定 ...
Linux安装Node.js
安装环境:Ubuntu:x86_64 Node.js 官网:https://nodejs.org 下载Node.js: wget https://nodejs.org/dist/v4.4.3/node ...
jQuery架构剖析
对于jQuery的整体架构,经典之处有三: 1.jQuery的无new构建 2.jQuery的链式调用 3.jQuery的插件接口想必兄弟姐妹们也觉得这架构不错哈,但有时又畏惧去拜读大量的jQuer ...

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

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

随机推荐

热门专题

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

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