实用,修改Ecshop后台商品管理中的商品品牌项为可分组和搜索的下拉框
来源:互联网 发布:小鸭淘宝复制软件 编辑:程序博客网 时间:2024/05/01 22:38
公司项目中遇到这样的问题,ecshop后台商品管理的过程中,特别是在后期商品品牌数量越来越多的时候,我们在添加或修改商品时,会遇到为某个商品添加指定一个品牌需要很费劲的去品牌选择的下拉框中去一个个找,这给产品发布人员造成了很大的不便,工作效率大大降低!在实际运用场景中,我们的产品发布人员希望能够通过搜索的方式直接指定已有的商品品牌,这时候这篇blog就诞生了,实现这一功能,我选择了使用Chosen这一小巧的JQuery插件。
Chosen 是一个支持jquery的select下拉框美化插件,它能让丑陋的、很长的select选择框变的更好看、更方便。不仅如此,它更扩展了select,增加了自动筛选的功能。它可对列表进行分组,同时也可禁用某些选择项。摘自Chosen介绍
闲话少叙,我们先来看下完成后的效果图:
这个时候我们再来添加商品品牌的时候就easy太多了。Chosen这一插件还能美化ecshop默认较丑陋的下拉框,实际项目中我们还有很多地方可以用到这样的功能,毕竟ecshop的后台真的太不友好了。是不是觉得美美哒呢!
由于ecshop默认是不兼容JQuery的,所以我们需要先对后台进行JQuery兼容处理,方法大家百度应该能有发现,这里我就不介绍了。
1、pageheader.htm中引入JQuery.js、Chosen.jquery.js、transport_jq.js
2、找到文件admin/templates/goods_info.htm 搜索如下代码
<tr> <td class="label">{$lang.lab_goods_brand}</td> <td><select name="brand_id" onchange="hideBrandDiv()" ><option value="0">{$lang.select_please}{html_options options=$brand_list selected=$goods.brand_id}</select> {if $is_add} <a href="javascript:void(0)" title="{$lang.rapid_add_brand}" onclick="rapidBrandAdd()" class="special" >{$lang.rapid_add_brand}</a> <span id="brand_add" style="display:none;"> <input class="text" size="15" name="addedBrandName" /> <a href="javascript:void(0)" onclick="addBrand()" class="special" >{$lang.button_submit}</a> <a href="javascript:void(0)" onclick="return goBrandPage()" title="{$lang.brand_manage}" class="special" >{$lang.brand_manage}</a> <a href="javascript:void(0)" onclick="hideBrandDiv()" title="{$lang.hide}" class="special" ><<</a> </span> {/if} </td> </tr>将其修改为
<tr> <td class="label">{$lang.lab_goods_brand}</td> <td><select name="brand_id" data-placeholder="选择品牌" class="chosen-select" style="width:350px;" onchange="hideBrandDiv()" ><option value="0">{$lang.select_please}{html_options options=$brand_list selected=$goods.brand_id}</select> <script type="text/javascript"> var config = { '.chosen-select' : {}, '.chosen-select-deselect' : {allow_single_deselect:true}, '.chosen-select-no-single' : {disable_search_threshold:10}, '.chosen-select-no-results': {no_results_text:'Oops, nothing found!'}, '.chosen-select-width' : {width:"95%"} } for (var selector in config) { $(selector).chosen(config[selector]); } </script> {if $is_add} <a href="javascript:void(0)" title="{$lang.rapid_add_brand}" onclick="rapidBrandAdd()" class="special" style="margin-top:-20px">{$lang.rapid_add_brand}</a> <span id="brand_add" style="display:none;"> <input class="text" size="15" name="addedBrandName" style="border:1px solid #ccc;height:29px" /> <a href="javascript:void(0)" onclick="addBrand()" class="special" >{$lang.button_submit}</a> <a href="javascript:void(0)" onclick="return goBrandPage()" title="{$lang.brand_manage}" class="special" >{$lang.brand_manage}</a> <a href="javascript:void(0)" onclick="hideBrandDiv()" title="{$lang.hide}" class="special" ><<</a> </span> {/if} </td> </tr>
就这么简单即可实现我们想要的效果了!
附件已上传网盘,链接:http://share.weiyun.com/ca30c924d2977a94c7291ce48a148223 (密码:bHvd)
- 实用,修改Ecshop后台商品管理中的商品品牌项为可分组和搜索的下拉框
- [OK]ECSHOP后台的商品列表里显示商品品牌
- ecshop后台商品列表和添加修改选择供货商处只显示自己管理的
- ecshop后台商品列表和添加修改选择供货商处只显示自己管理的
- 在ECSHOP商品列表页显示每个商品的品牌
- ECSHOP 后台商品列表页搜索二次
- Ecshop修改后台的大分类商品数量
- ECSHOP获取当前分类下商品的品牌列表
- Ecshop购物车或结算页面显示商品的品牌
- 项目实践——商品后台管理中的商品添加
- ecshop后台显示商品缩略图
- ecshop后台设置商品赠品
- ecshop后台ajax无刷新修改商品数量原理分析。
- ecshop调用指定商品分类下固定条数的商品品牌列表
- ECSHOP将分类下的商品列表修改为当前的分类名称
- ECshop 后台添加商品的导航增添一个规格参数
- ECSHOP后台商品列表中增加商品属性的显示方法
- ECSHOP后台商品列表中增加商品属性的显示方法 .
- Objective-C Programming: The Big Nerd Ranch Guide (2nd Edition) 阅读笔记(Part III)
- PHP 数据结构 算法 三元组 Triplet
- PHP数据结构大全地址之->模拟静态队列
- 【USACO4.2.1】草地排水 最大流
- 【USACO4.2.2】完美的牛栏 二分图的匹配
- 实用,修改Ecshop后台商品管理中的商品品牌项为可分组和搜索的下拉框
- 大型网站服务器架构
- 【USACO4.2.4】奶牛自行车
- 你想建设一个能承受500万PV/每天的网站吗?如何计算呢?
- 递归实现汉诺塔问题
- 黑马程序员---异常
- [python学习] 模仿浏览器下载CSDN源文并实现PDF格式备份
- 百万连接之路
- 黑马程序员---多线程(一)