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.页面展现效果