文档章节

jQuery扩展组件 三级联动

 泪眼看世界
发布于 2015/03/23 20:24
字数 1774
阅读 29
收藏 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
济南
程序员
私信 提问
jQuery Widgets —— 多组件 jQuery 插件库

jQuery Widgets 是一套基于 jQuery 或 JavaScript 的插件库 — 包含:轮播、标签页、滚动条、下拉框、对话框、搜索提示、城市选择(城市三级联动)、日历等组件。...

王练
2016/11/23
15
0
10.16作业

1,实现jQuery三级联动 2,实现jQuery轮播

neusoft_gy
2017/10/16
0
0
优化省市县三级联动(查询数据库)

javaWeb项目,页面实现省市县三级联动。 想到三种方法: 1.查询出所有省并显示,选择省或市,利用ajax从后台查询出对应数据,再显示。 2.查询出所有省市县,数据隐藏到页面,jquery实现联动显...

田野_7
2016/05/30
999
6
2012年度最新的10个原创Jquery插件

漫画原创名片提示框Jquery插件最初版 此Jquery插件是一款非常实用的功能,像微博和一些大平台的会员信息都是以名片示的弹出层显示,今天把它封装成一个插件分享给大家用,这是最初版本功能已...

邓剑彬
2012/11/29
41
0
2012年度最新的10个原创Jquery插件

漫画原创名片提示框Jquery插件最初版 此Jquery插件是一款非常实用的功能,像微博和一些大平台的会员信息都是以名片示的弹出层显示,今天把它封装成一个插件分享给大家用,这是最初版本功能已...

邓剑彬
2012/11/29
605
6

没有更多内容

加载失败,请刷新页面

加载更多

Spring Batch @SpringBatchTest 注解

Spring Batch 提供了一些非常有用的工具类(例如 JobLauncherTestUtils 和 JobRepositoryTestUtils)和测试执行监听器(StepScopeTestExecutionListener 和 JobScopeTestExecutionListener)......

honeymose
38分钟前
3
0
浏览器缓存

HTTP缓存类型 200 from cache:直接从本地缓存获取响应,可细分为from disk cache, from memory cache 304 Not Modified:协商缓存,本地未命中发送校验数据到服务端,如果服务端数据没有改变,则读...

关元
51分钟前
3
0
正则表达式简单使用说明

在Python3里确实简单明了,测试样例如下 # 正则content = 'Hello 1234567 World_This is a Regex Demo'# 贪婪匹配 尽可能多的匹配result = re.match('^He.*(\d+).*Demo$', co......

轻轻的往前走
53分钟前
3
0
多线程创建方式

一、基本概念 进程:就是正在运行的应用程序,进程是线程的集合。 线程:就是进程中的一条执行路径,一个独立的执行单元。 多线程:就是为了提高程序的效率,使用多线程,每个线程互不影响,...

秋至丶枫以落
56分钟前
3
0
聊聊flink的Async I/O

序 本文主要研究一下flink的Async I/O 实例 // This example implements the asynchronous request and callback with Futures that have the// interface of Java 8's futures (which is t......

go4it
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部