系统中可能很多地方都需要选择商品,例如模板机制、活动等地方。
系统中可参考商品赠品的功能实现。
使用方法如下:
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.页面展现效果
相关推荐
在Yii2框架中,`yiisoft/yii2` 是核心库,它包含了路由、控制器、模型、视图、MVC模式等关键组件。这个通用后台系统充分利用了Yii2的这些特性,通过优雅的代码结构和强大的性能优化,使得开发者能够高效地进行后台...
gii是Yii框架提供的一个强大的代码生成器工具,它可以自动生成各种类型的代码,包括模型类、控制器、视图文件以及完整的CRUD(Create, Read, Update, Delete)操作。接下来,我们将详细介绍如何使用gii工具为商品...
Yii查询生成器(QueryBuilder)是Yii框架中用于数据库操作的重要组件之一,它允许开发者以面向对象的方式构建和执行SQL查询语句。本文将通过实例演示Yii查询生成器的使用方法,包括建立查询、连接数据库、选择数据、...
此外,这些组件还支持多种配置选项(`pluginOptions`),比如可以设置是否自动关闭选择器(`autoclose`)、是否高亮显示今天的日期(`todayHighlight`)等。 此外,如果你在使用这些组件时发现它们显示的是英文界面...
10. **Widget组件**:Yii2的Widget组件机制允许开发者复用和组合UI元素,如GridView用于数据展示, ActiveForm用于处理表单,Pjax用于局部刷新等。 11. **模板引擎**:Yii2使用Twig或其内置的PHP模板引擎,提供干净...
Yii 2.0 是Yii框架的重大升级,引入了许多新特性,如依赖注入、事件系统、服务定位器等,同时保持了性能和灵活性。 2. **高级应用模板**:此模板是Yii 2.0的一个预配置项目,分为前端和后端两个独立的应用,每个...
7. **命令行工具**:Yii提供的Gii代码生成工具,可以快速生成模型、控制器、视图等基础代码,提高开发效率。 8. **RESTful API支持**:Yii2为构建RESTful Web服务提供了强大的支持,便于实现前后端分离和移动应用...
- 对于复杂表单,考虑使用Yii2的`GridView`或`DetailView`组件。 以上就是Yii2框架中创建下拉框的基本步骤和关键知识点。通过这个示例,初学者可以更好地理解如何在实际项目中应用Yii框架来构建Web应用。
- **三级联动:** 实现省市区的三级联动选择器,通常采用JavaScript结合HTML实现。 以上知识点涵盖了从基础到高级的多个层面,适用于不同程度的学习者和开发者。通过深入理解这些知识点,可以帮助开发者更好地掌握...
它遵循模型-视图-控制器(MVC)架构模式,并强调代码的可重用性和组件化。Yii 2.0.9是该框架的一个稳定版本,提供了一系列的更新和修复,以增强性能和安全性。 首先,Yii 2.0.9 的核心特性包括自动加载器,它允许...
它遵循MVC(模型-视图-控制器)设计模式,提供了丰富的组件来简化常见的Web开发任务。本篇学习笔记将详细介绍Yii框架的基本概念,包括请求处理流程、组件、事件与行为、错误和日志处理、国际化以及视图和控制台应用...
购物车功能的实现,通常会涉及到会话(Session)或者cookie来存储用户临时选择的商品。Yii框架对会话管理提供了很好的支持,可以方便地添加、删除购物车中的商品,并计算总价。 订单处理是商城系统的关键部分,涉及...
1. **文件上传处理**:Yii2框架内置了文件上传组件,可以方便地处理文件上传。你需要在模型(Model)中定义一个属性来接收上传的头像文件,并在规则(Rules)中设定允许的文件类型和大小限制。 2. **图片处理**:...
Yii框架是PHP开发中的一个高性能、...总结,Yii框架作为PHP开发的利器,凭借其高效、灵活和组件化的特性,成为了许多开发者的选择。无论是在新项目还是维护旧项目中,熟悉并掌握Yii框架都将对提升开发效率大有裨益。
Yii2 是一款高效、灵活且全面的PHP开发框架,它为构建现代Web应用程序提供了强大...在使用Yii2 开发时,无需依赖Composer安装,直接下载后即可进行修改和使用,这对于初学者和经验丰富的开发者来说都是一种便捷的选择。
以上是关于Yii框架1.1.8版本的一些关键知识点,这些特性使得Yii成为PHP开发中的热门选择,尤其适合构建大型企业级应用。通过深入理解和熟练使用这些特性,开发者可以大大提高开发效率,打造出高质量的Web应用。
7. **组件(Components)**:Yii 2 的组件系统允许自定义全局行为,如设置日志组件或邮件服务。 8. **库和依赖**:项目依赖的第三方库通常通过 Composer 管理。`vendor` 目录包含了所有安装的依赖,包括 Yii 框架...
2. **组件化设计**:Yii的所有功能都封装为可重用的组件,这使得开发过程更加模块化,便于扩展和定制。 3. **性能优化**:Yii内置了如数据库查询缓存、页面片段缓存、数据序列化等多种缓存策略,以提高应用性能。...