`
niqingyang
  • 浏览: 44015 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

YII 商品选择器组件

    博客分类:
  • YII
阅读更多

系统中可能很多地方都需要选择商品,例如模板机制、活动等地方。

系统中可参考商品赠品的功能实现。

使用方法如下:

1.引入js:

{script src='@static/js/jquery.widget.js'}

 2.在页面中指定组件的容器,所谓组件就是指ajax加载的一个已经实现了大部分功能的页面,为了方便管理,需要为此加载的页面指定一块区域来容纳它,一般容器可以选择DIV,方便前端进行修改样式,例如在页面中第一如下代码(此处加了class属性,方便绑定事件,同时也可以方便处理页面中多个商品选择容器):

<!-- 商品选择器 -->
<div class="goods-picker-container"></div>

 3.编写js代码进行初始化操作:

<script type="text/javascript">
	$().ready(function() {
		//组件初始化,点击某个按钮展开商品选择控件
		$(".goods-picker").click(function() {
			var container = $(this).parents(".goods-sku").find(".goods-picker-container");
			var sku_id = $(this).data("sku-id");
			// 一个页面中如果有多个组件,则需要为每个组件定义一个唯一的ID,此ID
			// 建议就是分页控件的ID,也主要是为了区分开每个组件的分页已经表单
			// 如果页面中只有一个,默认为GoodsPickerPage
			var page_id = "GoodsPickerPage_" + sku_id;
			//判断容器是否已经初始化了组件
			// $.goodspickers()可获取页面中所有的选择器组件对象,
			// 也可以根据ID获取指定的组件对象
			if (!$.goodspickers(page_id)) {

				// 如果已经有选择了的商品则可以想下面这样初始化已选择的数据,有两种形式
				var values = [];

				// 设置已选择:第一种方法,加载控件前传递已选择的商品信息
				$(container).parents(".goods-sku").find(".goods-gift-list").find("li").each(function() {
					var goods_id = $(this).find(".gift-goods-id").val();
					var sku_id = $(this).find(".gift-sku-id").val();
					values[goods_id + "-" + sku_id] = {
						goods_id: goods_id,
						sku_id: sku_id,
					};
				});
				// 初始化组件,为容器绑定组件
				var goodspicker = $(container).goodspicker({
					// 组件ajax提交的数据,主要设置分页的相关设置
					data: {
						page: {
							// 分页唯一标识
							page_id: page_id
						},
					// 不能将自己作为赠品
					//except_sku_ids: sku_id
					},
					// 已加载的数据
					values: values,
					// 选择商品和未选择商品的按钮单击事件
					// @param selected 点击是否选中
					// @param sku 选中的SKU对象
					// @return 返回false代表
					click: function(selected, sku) {
						// 此click函数根据业务需求自定义
						if (selected == true) {
							var html = $("#gift_template").html();
							var element = $($.parseHTML(html));
							$(element).data("sku-id", sku.sku_id);
							$(element).data("goods-id", sku.goods_id);
							$(element).find("img").attr("src", sku.goods_image);
							$(element).find(".goods_name").html(sku.sku_name);
							$(element).find(".gift-sku-id").val(sku.sku_id);
							$(element).find(".gift-goods-id").val(sku.goods_id);
							$(element).attr("data-gift-sku-id", sku.sku_id);
							$(container).parents(".goods-sku").find(".goods-gift-list").append(element);
						} else {
							$(container).parents(".goods-sku").find(".goods-gift-list").find("[data-gift-sku-id='" + sku.sku_id + "']").remove();
						}
					},
					// 设置已选择:第二种方法,加载控件后传递已选择的商品信息
					// 回调函数加载已选择的商品
					callback: function() {
						/**
						var goodspicker = this;
						// 已选择
						$(container).parents(".goods-sku").find(".goods-gift-list").find("li").each(function() {
							var goods_id = $(this).find(".gift-goods-id").val();
							var sku_id = $(this).find(".gift-sku-id").val();
							// 通过组件的add函数选择指定的商品信息				
							goodspicker.add(goods_id, sku_id);
						});
						 **/
					}
				});

			} else {
				if ($(container).is(":hidden")) {
					$(container).show();
				} else {
					$(container).hide();
				}
			}
		});

		//移除赠品
		$("body").on("click", ".gift-del", function() {
			var target = $(this).parents("li");
			var goods_id = $(target).data("goods-id");
			var sku_id = $(target).data("sku-id");

			var page_id = "GoodsPickerPage_" + $(this).parents(".goods-sku").data("sku-id");

			if ($.goodspickers(page_id)) {
				// 获取控件
				var goodspicker = $.goodspickers(page_id);
				// 通过组件的remove函数取消选择指定的商品信息
				goodspicker.remove(goods_id, sku_id);
			}

			$(target).remove();
		});
	});
</script>

 4.页面展现效果



 

 

 

 

  • 大小: 386.1 KB
分享到:
评论

相关推荐

    yii2 通用后台系统

    在Yii2框架中,`yiisoft/yii2` 是核心库,它包含了路由、控制器、模型、视图、MVC模式等关键组件。这个通用后台系统充分利用了Yii2的这些特性,通过优雅的代码结构和强大的性能优化,使得开发者能够高效地进行后台...

    yii的小部件使用

    gii是Yii框架提供的一个强大的代码生成器工具,它可以自动生成各种类型的代码,包括模型类、控制器、视图文件以及完整的CRUD(Create, Read, Update, Delete)操作。接下来,我们将详细介绍如何使用gii工具为商品...

    Yii查询生成器(Query Builder)用法实例教程

    Yii查询生成器(QueryBuilder)是Yii框架中用于数据库操作的重要组件之一,它允许开发者以面向对象的方式构建和执行SQL查询语句。本文将通过实例演示Yii查询生成器的使用方法,包括建立查询、连接数据库、选择数据、...

    Yii2超好用的日期和时间组件(值得收藏)

    此外,这些组件还支持多种配置选项(`pluginOptions`),比如可以设置是否自动关闭选择器(`autoclose`)、是否高亮显示今天的日期(`todayHighlight`)等。 此外,如果你在使用这些组件时发现它们显示的是英文界面...

    yii2-master

    10. **Widget组件**:Yii2的Widget组件机制允许开发者复用和组合UI元素,如GridView用于数据展示, ActiveForm用于处理表单,Pjax用于局部刷新等。 11. **模板引擎**:Yii2使用Twig或其内置的PHP模板引擎,提供干净...

    yii2.0高级版

    Yii 2.0 是Yii框架的重大升级,引入了许多新特性,如依赖注入、事件系统、服务定位器等,同时保持了性能和灵活性。 2. **高级应用模板**:此模板是Yii 2.0的一个预配置项目,分为前端和后端两个独立的应用,每个...

    PHP Yii2框架开发

    7. **命令行工具**:Yii提供的Gii代码生成工具,可以快速生成模型、控制器、视图等基础代码,提高开发效率。 8. **RESTful API支持**:Yii2为构建RESTful Web服务提供了强大的支持,便于实现前后端分离和移动应用...

    yii示例-下拉框-最新的yii框架

    - 对于复杂表单,考虑使用Yii2的`GridView`或`DetailView`组件。 以上就是Yii2框架中创建下拉框的基本步骤和关键知识点。通过这个示例,初学者可以更好地理解如何在实际项目中应用Yii框架来构建Web应用。

    Yii面试题摸底测试教学考前摸底

    - **三级联动:** 实现省市区的三级联动选择器,通常采用JavaScript结合HTML实现。 以上知识点涵盖了从基础到高级的多个层面,适用于不同程度的学习者和开发者。通过深入理解这些知识点,可以帮助开发者更好地掌握...

    Yii 2.0.9 basic

    它遵循模型-视图-控制器(MVC)架构模式,并强调代码的可重用性和组件化。Yii 2.0.9是该框架的一个稳定版本,提供了一系列的更新和修复,以增强性能和安全性。 首先,Yii 2.0.9 的核心特性包括自动加载器,它允许...

    Yii框架学习笔记.pdf

    它遵循MVC(模型-视图-控制器)设计模式,提供了丰富的组件来简化常见的Web开发任务。本篇学习笔记将详细介绍Yii框架的基本概念,包括请求处理流程、组件、事件与行为、错误和日志处理、国际化以及视图和控制台应用...

    yii框架商城

    购物车功能的实现,通常会涉及到会话(Session)或者cookie来存储用户临时选择的商品。Yii框架对会话管理提供了很好的支持,可以方便地添加、删除购物车中的商品,并计算总价。 订单处理是商城系统的关键部分,涉及...

    yii2 头像上传 完整版 带cookie保存

    1. **文件上传处理**:Yii2框架内置了文件上传组件,可以方便地处理文件上传。你需要在模型(Model)中定义一个属性来接收上传的头像文件,并在规则(Rules)中设定允许的文件类型和大小限制。 2. **图片处理**:...

    php最新框架YII框架

    Yii框架是PHP开发中的一个高性能、...总结,Yii框架作为PHP开发的利器,凭借其高效、灵活和组件化的特性,成为了许多开发者的选择。无论是在新项目还是维护旧项目中,熟悉并掌握Yii框架都将对提升开发效率大有裨益。

    php开发框架Yii2

    Yii2 是一款高效、灵活且全面的PHP开发框架,它为构建现代Web应用程序提供了强大...在使用Yii2 开发时,无需依赖Composer安装,直接下载后即可进行修改和使用,这对于初学者和经验丰富的开发者来说都是一种便捷的选择。

    yii框架1.1.8

    以上是关于Yii框架1.1.8版本的一些关键知识点,这些特性使得Yii成为PHP开发中的热门选择,尤其适合构建大型企业级应用。通过深入理解和熟练使用这些特性,开发者可以大大提高开发效率,打造出高质量的Web应用。

    yii-advanced-app-2.0.36.tgz

    7. **组件(Components)**:Yii 2 的组件系统允许自定义全局行为,如设置日志组件或邮件服务。 8. **库和依赖**:项目依赖的第三方库通常通过 Composer 管理。`vendor` 目录包含了所有安装的依赖,包括 Yii 框架...

    YII框架开源项目

    2. **组件化设计**:Yii的所有功能都封装为可重用的组件,这使得开发过程更加模块化,便于扩展和定制。 3. **性能优化**:Yii内置了如数据库查询缓存、页面片段缓存、数据序列化等多种缓存策略,以提高应用性能。...

Global site tag (gtag.js) - Google Analytics