文档章节

jQuery扩展组件 三级联动

 泪眼看世界
发布于 2015/03/23 20:24
字数 1774
阅读 26
收藏 1

事先映入jQuery组件。

jQuery扩展组件方法:

(function($, window, document, undefined) {

         var $window = $(window);

 /*

          * lifei

          *20141023

          * checkbox复选框级联选中,最多支持3级,如果需要可在进行扩展

          *IE10Chrome,FF中,对于选中状态,第一次$('#checkbox').attr('checked',true)可以实现

          *但是当通过代码清除选中,下次再通过代码 $('#checkbox').attr('checked',true) 去选中时

          *虽然代码中有checked='checked',但是画面表现都没有打勾。

          *IE8IE6下无此问题。后来调查了相关的资料,发现在jquery1.9.1中,attr('checked',true)都换成prop('checked',true)

          */

           $.fn.cascadeCheckbox = function(options){

                   var elements = this;//dom元素,调用jQuery扩展方法的对象数组

                   var $elements = $(this);//jquery对象数组

                   var settings = {

                            selector:'[data-name^=grand]:checkbox',//选择器

                            mark : '-',//分隔符

                            dataPro : 'data-name',//自定义属性名称,复选框自定义属性名称需要按照指定规则,否则方法调用无效,例:顶级(1个):grand  中间级(多个):grand-parent1grand-parent2  末级(多个,同父级下命名相同):grand-parent1-childgrand-parent2-child

                            eventType : 'click',//事件类型

                            styleClass : 'hover',//选中行的样式类

                            flag : false,//是否需要设置选中时的背景样式

                            pStyleClass : '.default',//需要设置背景颜色的父级样式类

                            FUNC:function(){}//函数,执行完全选相应操作后执行的函数

        };

                   if(options){$.extend(settings, options);}

                   $elements.delegate(settings.selector,settings.eventType,function(){

                            var str = $(this).attr(settings.dataPro);

                            var arr =  str.split(settings.mark);

                            var len = arr.length;

                            var flag;

                            if(len==1){//顶级,只需要管理下级是否选中

                                     $("["+settings.dataPro+"^='"+arr[0]+"']:checkbox").prop("checked", this.checked);

                                     if(settings.flag){

                                                        if(this.checked){

                                                      $("["+settings.dataPro+"^='"+arr[0]+"']:checkbox:checked").parents(settings.pStyleClass).addClass(settings.styleClass);

                                                        }else{

                                                         $("["+settings.dataPro+"^='"+arr[0]+"']:checkbox:not(:checked)").parents(settings.pStyleClass).removeClass(settings.styleClass);

                                                                 }

                                               }

                                    

                            }

                            if(len==2){//中间级,需要管理子级及父级,当中间级选中数与本身复选框数目相同时设置父级选中,父级状态即$("["+settings.dataPro+"^='"+arr[0]+settings.mark+"']:checked").length==$("["+settings.dataPro+"^='"+arr[0]+settings.mark+"']:checkbox").length返回值

                                    $("["+settings.dataPro+"^='"+arr[0]+settings.mark+arr[1]+settings.mark+"']:checkbox").prop("checked", this.checked);

                                    

                                     $("["+settings.dataPro+"='"+arr[0]+"']:checkbox").prop("checked", $("["+settings.dataPro+"^='"+arr[0]+settings.mark+"']:checked").length==$("["+settings.dataPro+"^='"+arr[0]+settings.mark+"']:checkbox").length);        

                                    

                                     if(settings.flag){

                                                        if(this.checked){

                                                $("["+settings.dataPro+"^='"+arr[0]+settings.mark+arr[1]+settings.mark+"']:checkbox:checked").parents(settings.pStyleClass).addClass(settings.styleClass);

                                                        }else{

                                                         $("["+settings.dataPro+"^='"+arr[0]+settings.mark+arr[1]+settings.mark+"']:checkbox:not(:checked)").parents(settings.pStyleClass).removeClass(settings.styleClass);

                                                                 }

                                               }

        

                                     }

                            if(len==3){//末级,只需要管理父级状态,先设置父级状态,在依次设置顶级状态

                                     $("["+settings.dataPro+"='"+arr[0]+settings.mark+arr[1]+"']:checkbox").prop("checked", $("["+settings.dataPro+"^='"+arr[0]+settings.mark+arr[1]+settings.mark+"']:checked").length==$("["+settings.dataPro+"^='"+arr[0]+settings.mark+arr[1]+settings.mark+"']:checkbox").length);

                                     $("["+settings.dataPro+"='"+arr[0]+"']:checkbox").prop("checked", $("["+settings.dataPro+"^='"+arr[0]+settings.mark+"']:checked").length==$("["+settings.dataPro+"^='"+arr[0]+settings.mark+"']:checkbox").length);

                                     if(settings.flag){

                                                        if(this.checked){

                                                        $(this).parents(settings.pStyleClass).addClass(settings.styleClass);

                                                        }else{

                                                                 $(this).parents(settings.pStyleClass).removeClass(settings.styleClass);

                                                                 }

                                               }

                                    

                                     }

                                     if(typeof settings.FUNC =='function'){

                                     settings.FUNC();

                                     }

                            });

                            if(typeof settings.FUNC =='function'){

                                     settings.FUNC();

                                     }

                   return this;

                   }

          //end

         })(jQuery, window, document);

 

案例:<div class="cart w" id="cart">

<div class="cart-title fm1 f18 fb fc3">我的购物车</div>

<ul class="cart-th fm1 f14 fc3 ba"><li style="width:9%"><input data-name="grand" type="checkbox"  id="allSelect"><label for="allSelect">全选</label></li>

<li  style="width:35%">商品信息</li><li style="width:10%">单价(元)</li><li style="width:15%">促销</li>

<li style="width:10%">数量</li><li style="width:10%">金额(元)</li><li style="width:10%">操作</li></ul>

<!--一个店铺的商品 begin-->

<div>

<div class="shopTitle bl br"><input data-name="grand-parent1" type="checkbox">百草味旗舰店&nbsp;&nbsp;&nbsp;&nbsp;<a class="online fcS1">在线客服</a><p>整单优惠:慢10050</p></div>

<div class="shop-itemLists ba">

<div class="shop-itemList bb default">

<ul><li style="width:5%"><input data-name="grand-parent1-child" type="checkbox"></li>

<li class="tl itemPic"><a href="#" ><img src="resource/images/small01.jpg" alt="商品名称" height="80" width="80" /></a></li>

<li class="itemName tl"><a title="商品名称">商品名称商品名称商品名称商品名称商品名称商品名称商品名称</a></li>

<li>

<span>1-49:</span><span class="dollarFM fcR"></span><span class="fm3 f14 fcR">888</span><br/>

<span>&ge;50:</span><span class="dollarFM fcR"></span><span class="fm3 f14 fcR">888</span></li>

<li>

<table><tr><td><span>满赠</span></td></tr></table>

</li>

<li><div class="choose-amount-item ba"><a class="amount-minus br"><b></b></a>

                                                                                                                                                     <input type="text" value="1" class="item-amount f16 fn" />

                                                                                                                                                     <a class="amount-plus bl"><b></b></a></div></li>

<li><span class="dollarFM fcR f12"></span><span class="fm3 f16 fcR fb">99999</span></li>

 

<li><a >删除</a></li></ul>

<p>[赠品] 5元电子京券 仅可购买ZS官方旗舰店店铺的商品(订单完成后自动发放)</p>

</div>

 

<div class="shop-itemList bb default">

<ul><li style="width:5%"><input data-name="grand-parent1-child" type="checkbox"></li>

<li class="tl itemPic"><a href="#" ><img src="resource/images/small01.jpg" alt="商品名称" height="80" width="80" /></a></li>

<li class="itemName tl"><a title="商品名称">商品名称商品名称商品名称商品名称商品名称商品名称商品名称</a></li>

<li><span class="dollarFM fcR f14"></span><span class="fm3 f16 fcR">888</span></li>

<li>

<table><tr><td><span>满赠</span></td></tr></table>

</li>

<li><div class="choose-amount-item ba"><a class="amount-minus br"><b></b></a>

                                                                                                                                                     <input type="text" value="1" class="item-amount f16 fn" />

                                                                                                                                                     <a class="amount-plus bl"><b></b></a></div></li>

<li>88888</li>

 

<li><a onClick="ce(event,this)">删除2</a></li></ul>

<p>[赠品] 5元电子京券 仅可购买ZS官方旗舰店店铺的商品(订单完成后自动发放)</p>

</div>

 

</div>

</div>

<!--一个店铺的商品 end-->

<script>function ce(event1){

         var eventSource = event1.srcElement ? event1.srcElement : event1.target;

         var $eventSource = $(eventSource);//事件源对象

         var dataName = $eventSource.parents('.shop-itemList').find('input:checkbox').attr('data-name');

         var len = $eventSource.parents('.shop-itemLists').find('[data-name^='+dataName+']:checkbox').length;

         if(len>1){

                   $eventSource.parents('.shop-itemList').remove();

                   }else{

                            $eventSource.parents('.shopInfo').remove();

                            }

         }</script>

<!--一个店铺的商品 begin-->

<div>

<div class="shopTitle bl br"><input type="checkbox"  data-name="grand-parent2" >百草味旗舰店&nbsp;&nbsp;&nbsp;&nbsp;<a class="online fcS1">在线客服</a><p>整单优惠:慢10050</p></div>

<div class="shop-itemLists ba">

<div class="shop-itemList bb default loseItem">

<ul><li style="width:5%" class="tl state"><span>失效</span></li>

<li class="tl itemPic"><a href="#" ><img src="resource/images/small01.jpg" alt="商品名称" height="80" width="80" /></a></li>

<li class="itemName tl"><a title="商品名称">商品名称商品名称商品名称商品名称商品名称商品名称商品名称</a></li>

<li><span class="dollarFM fcR f14"></span><span class="fm3 f16 fcR">888</span></li>

<li>

<table><tr><td><span>满赠</span></td></tr></table>

</li>

<li><div class="choose-amount-item ba"><a class="amount-minus br"><b></b></a>

                                                                                                                                                     <input type="text" value="1" class="item-amount f16 fn" />

                                                                                                                                                     <a class="amount-plus bl"><b></b></a></div></li>

<li>555</li>

 

<li><a>删除</a></li></ul>

<p>[赠品] 5元电子京券 仅可购买ZS官方旗舰店店铺的商品(订单完成后自动发放)</p>

</div>

<div class="shop-itemList bb default">

<ul><li style="width:5%"><input data-name="grand-parent1-child" type="checkbox"></li>

<li class="tl itemPic"><a href="#" ><img src="resource/images/small01.jpg" alt="商品名称" height="80" width="80" /></a></li>

<li class="itemName tl"><a title="商品名称">商品名称商品名称商品名称商品名称商品名称商品名称商品名称</a></li>

<li><span class="dollarFM fcR f14"></span><span class="fm3 f16 fcR">888</span></li>

<li>

<table><tr><td><span>满赠</span></td></tr></table>

</li>

<li><div class="choose-amount-item ba"><a class="amount-minus br"><b></b></a>

                                                                                                                                                     <input type="text" value="1" class="item-amount f16 fn" />

                                                                                                                                                     <a class="amount-plus bl"><b></b></a></div></li>

<li>55</li>

 

<li><a>删除</a></li></ul>

<p>[赠品] 5元电子京券 仅可购买ZS官方旗舰店店铺的商品(订单完成后自动发放)</p>

</div>

 

</div>

</div>

<!--一个店铺的商品 end-->

 

<div class="cart-toolbar ba"><input type="checkbox"  data-name="grand" id="allSelect2"><label for="allSelect2">全选</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a>删除选中项</a></div>

 

<div>

<div class="cart-total ba tr bg1 w" id="cart-total">

<div class="totalPrice tr">总计(不含运费):<span class="dollarFM fcR f22"></span><span class="fm3 f24 fcR">888.00</span></div><a class="goOrder btnBg2 f18 lp fm1">结算</a>

</div>

</div>

<script>

$("#cart").cascadeCheckbox({flag:true});//三级联动方法调用

</script>

</div>

© 著作权归作者所有

共有 人打赏支持
粉丝 0
博文 2
码字总数 2315
作品 0
济南
程序员
javaWeb数据库动态加载全国省市区三级联动

demo源码下载地址:https://git.oschina.net/zhengweishan/GetProvinceCityArea 首先声明一下,全国省市区三级联动有很多的插件。没有必要这么麻烦的把省市区存到数据库,然后再获取。这样缺...

火龙战士
2015/04/16
0
8
介绍几个常用的jquery ui框架

jQuery ui框架很多,除了官方提供的jquery UI(如果你还不知道什么是jQuery UI,请看下载了jquery ui后如何使用),还有很多第三方提供的ui框架,因官方提供的jquery ui框架体积较大,所以很多...

一念三千
2012/10/16
0
0
介绍几个常用的jquery ui框架

jQuery ui框架很多,除了官方提供的jquery UI,还有很多第三方提供的ui框架,因官方提供的jquery ui框架体积较大,所以很多人都不喜欢用,但不论是官方提供还是第三方提供,他们都是基于jqu...

Junn
2012/12/05
0
2
jQuery easyui官方文档翻译 - 基础总览

jQuery easyui官方文档翻译web版:http://easydoc.cloudfoundry.com/doc/easyui/1.2.5/ Documentation Each component of easyui has properties, methods and events. Users can extend the......

noday
2012/03/26
0
0
Jquery Tools——不可错过的Jquery UI库

发表于: Jquery, 有用的示例 | 作者: IIduce Jquery Tools是一组基于Jquery构建的用户界面常用组件的集合。通过使用Jquery Tools,网站前端开发无疑会变得更加高效。值得注意的是,Jquery To...

晨曦之光
2012/03/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

初级开发-编程题

` public static void main(String[] args) { System.out.println(changeStrToUpperCase("user_name_abc")); System.out.println(changeStrToLowerCase(changeStrToUpperCase("user_name_abc......

小池仔
今天
6
0
现场看路演了!

HiBlock
昨天
16
0
Rabbit MQ基本概念介绍

RabbitMQ介绍 • RabbitMQ是一个消息中间件,是一个很好用的消息队列框架。 • ConnectionFactory、Connection、Channel都是RabbitMQ对外提供的API中最基本的对象。Connection是RabbitMQ的s...

寰宇01
昨天
10
0
官方精简版Windows10:微软自己都看不过去了

微软宣布,该公司正在寻求解决方案,以减轻企业客户的Windows 10规模。该公司声称,企业客户下载整个Windows 10文件以更新设备既费钱又费时。 微软宣布,该公司正在寻求解决方案,以减轻企业...

linux-tao
昨天
19
0
TypeScript基础入门之JSX(二)

转发 TypeScript基础入门之JSX(二) 属性类型检查 键入检查属性的第一步是确定元素属性类型。 内在元素和基于价值的元素之间略有不同。 对于内部元素,它是JSX.IntrinsicElements上的属性类型...

durban
昨天
12
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部