文档章节

jQuery扩展组件 三级联动

 泪眼看世界
发布于 2015/03/23 20:24
字数 1774
阅读 22
收藏 1
点赞 0
评论 0

事先映入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
jquery 对select中的option操作

Jquery的功能很强大,下面介绍Jquery操作表单Select元素的用法: jQuery获取Select元素,并选择的Text和Value: 1. $("#select_id").change(function(){//code...}); //为Select添加事件,当选...

JAVA_NINA
2011/12/05
0
0
jquery/js PDF预览

借助浏览器实现PDF预览 <html><body style="background-color: rgb(38,38,38); height: 100%; width: 100%; overflow: hidden; margin: 0"><embed width="100%" height="100%" name="plugin......

wsy5344
2015/06/21
0
0
HTML5拓扑图编辑器项目 - Graph.Editor

拓扑图编辑器介绍 项目地址:https://github.com/samsha/graph.editor 在线演示:http://demo.qunee.com/editor/ Graph.Editor是一款基于HTML5技术的拓补图编辑器,采用jquery插件的形式,是...

nosand
2015/01/17
0
0
jQuery中 $.fn的用法

jquery $.fn $.fx是什么意思 $.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效。 如扩展$.fn.abc(),即$.fn.abc()是对jquery扩展了一个abc方法,那么后面你的每一个...

-wangming-
2015/02/05
0
0
JQuery 和 Extjs 比较

JQuery 和 Extjs 比较 一、JQuery 和 Extjs 比较 JQuery-EasyUI是仿照Ext做的。 Ext框架是一个整体,面向对象的编程思想,每个控件之间可以相互通讯。JQuery的控件全都是分散的,没有整体性可...

Amamatthew
2014/09/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

npm profile 新功能介绍

转载地址 npm profile 新功能介绍 npm新版本新推来一个功能,npm profile,这个可以更改自己简介信息的命令,以后可以不用去登录网站来修改自己的简介了 具体的这个功能的支持大概是在6这个版...

durban
10分钟前
0
0
Serial2Ethernet Bi-redirection

Serial Tool Serial Tool is a utility for developing serial communications, custom protocols or device testing. You can set up bytes to send accordingly to your protocol and save......

zungyiu
16分钟前
0
0
python里求解物理学上的双弹簧质能系统

物理的模型如下: 在这个系统里有两个物体,它们的质量分别是m1和m2,被两个弹簧连接在一起,伸缩系统为k1和k2,左端固定。假定没有外力时,两个弹簧的长度为L1和L2。 由于两物体有重力,那么...

wangxuwei
31分钟前
0
0
apolloxlua 介绍

##项目介绍 apolloxlua 目前支持javascript到lua的翻译。可以在openresty和luajit里使用。这个工具分为两种模式, 一种是web模式,可以通过网页使用。另外一种是tool模式, 通常作为大规模翻...

钟元OSS
37分钟前
0
0
Mybatis入门

简介: 定义:Mybatis是一个支持普通SQL查询、存储过程和高级映射的持久层框架。 途径:MyBatis通过XML文件或者注解的形式配置映射,实现数据库查询。 特性:动态SQL语句。 文件结构:Mybat...

霍淇滨
45分钟前
0
0
开发技术瓶颈期,如何突破

前言 读书、学习的那些事情,以前我也陆续叨叨了不少,但总觉得 “学习方法” 就是一个永远在路上的话题。个人的能力、经验积累与习惯方法不尽相同,而且一篇文章甚至一本书都很难将学习方法...

_小迷糊
46分钟前
0
0
安装tensorflow-XXX报错

报错: tensorflow-0.5.0-cp27-none-linux_x86_64.whl is not a supported wheel on this platform. 解决: wget https://bootstrap.pypa.io/get-pip.py sudo python2.7 get-pip.py sudo p......

Yao--靠自己
49分钟前
0
0
JVM学习手册(一):JVM模型

一直从事JAVA开发,天天和JVM打交道,仔细想想对JVM还真的不是特别了解,实在是不应该.周六看了许多资料,也算有点心得,记录一下。 JVM内存模型分为5个区域:方法区,堆,虚拟机栈,本地方法栈,程序计...

勤奋的蚂蚁
今天
0
0
转行零基础该如何学Python?这些一定要明白!

转行零基础学Python编程开发难度大吗?从哪学起?近期很多小伙伴问我,如果自己转行学习Python,完全0基础能否学会呢?Python的难度到底有多大?今天,小编就来为大家详细解读一下这个问题。...

猫咪编程
今天
2
0
205. Isomorphic Strings - LeetCode

Question 205. Isomorphic Strings Solution 题目大意:判断两个字符串是否具有相同的结构 思路:构造一个map,存储每个字符的差,遍历字符串,判断两个两个字符串中相同位置字符的差是否相同 Ja...

yysue
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部